Dynamically load Vuejs Components using Webpack

Question

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>

Are you asking why the second works, is that it?

acdcjunior
– acdcjunior

2018-04-04 04:18:45 +00:00
Commented Apr 4, 2018 at 4:18 — acdcjunior
– acdcjunior, Commented Apr 4, 2018 at 4:18
Yes...Updated question

ottz0
– ottz0

2018-04-04 07:04:06 +00:00
Commented Apr 4, 2018 at 7:04 — ottz0
– ottz0, Commented Apr 4, 2018 at 7:04

JoWinchester · Accepted Answer · 2018-04-04 07:50:22Z

1

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

answered Apr 4, 2018 at 7:50

JoWinchester

4374 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically load Vuejs Components using Webpack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related