CODEWITHSUNDEEP
vue.jswebpackimportes6-modulesvue-cli
Badmus Taofeeq
Badmus Taofeeq

Reputation: 769

Vue CLI dynamic import from project module

I know it is possible to imports component from a bundled webpack file like this 

import {componentA, componentB} from '../component.bundle';

Is it possible to achieve this same as a dynamic import, like this.

const url = '${window.location.origin}/assets/default/js/bundle/vue_data.bundle.js';
        this.getAxiosInstance().get(url).then(response => {
                const {Add, Edit, Filter, View} =  () => import(response.data);
        });

If yes, please how? Thank you

Upvotes: 2

Views: 1904

Answers (1)

Dan
Dan

Reputation: 63139

Yes, using dynamic imports:

To dynamically import a module, the import keyword may be called as a function. When used this way, it returns a promise.

I'm assuming from your url example that your import is in the assets directory of your project (i.e. src > assets) and not actually on an external domain. In that case, you don't need axios. You would do it like this:

const path = 'assets/default/js/bundle/vue_data.bundle.js';
import('@/' + path).then(module => {
  const {Add, Edit, Filter, View} = module;
});

You need to hardcode the @/ portion or there will be issues, e.g. if you tried to do import(path) with const path = '@/assets/default/js/bundle/vue_data.bundle.js'

Upvotes: 2

Related Questions