CODEWITHSUNDEEP
javascriptvue.jsecmascript-6vuejs2vue-cli
Ruud Ven
Ruud Ven

Reputation: 91

Dynamic import component Vue

I'm trying to do this:

import Mainlogo from '@/logos/' +process.env.MAIN_SITE+ '.vue'

so i can get an environment based logo in my app but this doesn't work.

Syntax Error: Unexpected token, expected ; (96:38)

Any ideas?

Upvotes: 0

Views: 398

Answers (2)

Ruud Ven
Ruud Ven

Reputation: 91

Ive managed to fix the issue doing the following:

<component :is="mainLogoLoader" class="logo"></component>

computed: {
  mainLogoLoader () {
    return () => import('@/logos/' +process.env.MAIN_SITE+ '.vue')
  }
},

and in module.exports:

MAIN_SITE: '"'+process.env.site+'"'

and my build command:

#site=mysite npm run build

Upvotes: 1

Dan
Dan

Reputation: 63069

From the Vue environment variable docs:

Note that only variables that start with VUE_APP_ will be statically embedded into the client bundle

This means that all custom vars you want to use in your .env files must be prefixed with VUE_APP_ if you want to pull them into the Vue app. For example:

VUE_APP_SECRET=secret
VUE_APP_TITLE=myapp

You then access them in your code like:

console.log(process.env.VUE_APP_SECRET)

Upvotes: 3

Related Questions