CODEWITHSUNDEEP
webpackvue.jswebpack-2
ottz0
ottz0

Reputation: 2605

Dynamically load Vuejs Components using Webpack

I'm Dynamically loading vue components. However it can't find the path. How can I set webpack so I can add the full path into the array and not concat it in the require?

Does not work

Vue.component(title, require(file));
<sau-page-nav :components="{{json_encode(['AddCredit'=>'../billing/AddCredit','PayPal'=>'../billing/PayPal'])}}"></sau-page-nav>

Works

Vue.component(title, require('../' + file));

<sau-page-nav :components="{{json_encode(['AddCredit'=>'billing/AddCredit','PayPal'=>'billing/PayPal'])}}"></sau-page-nav>

Upvotes: 0

Views: 672

Answers (1)

JoWinchester
JoWinchester

Reputation: 437

You can get your webpack.config to resolve a shortcut to a path...

This is from the webpack that comes when you initiate a project with with Vue cli...

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      modernizr$: path.resolve(__dirname, "../.modernizrrc")
    }
  },

It's the @ bit that's important - see how if references the src directory. This allows you to reference components without the full path. Like this...

Vue.component('test', require('@/components/my-component'))

or using an import...

import myComponent from '@/components/my-component'

Hope that helps

Upvotes: 1

Related Questions