[Vuejs]-Vuejs component is not loaded by using webpack

by

0👍

The render function replaces the template contents of the specified el (i.e., the #page element in this case). If you prefer to use in-DOM templates (which appears to be the case), you’d have to remove the render function:

new Vue({
  el: '#page',
  // render: /* ... */    // DELETE
})

I’m assuming you want App to contain ProductEdit. To do that, register the ProductEdit component in App:

// App.vue
export default {
  components: {
     ProductEdit,
  },
})

…and add the element in App‘s template:

<!-- App.vue -->
<template>
  <div>
    <product-edit />
  </div>
<template>

demo

0👍

Ok I fixed it. The problem was that I redefine resolve property in webpack.config.js, which override default resolve generated via vue cli:

...

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
...

  resolve: {
    alias: {
      'components': path.resolve(__dirname, 'src/components'),
    },
  },

So I merge it into:

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      'components': path.resolve(__dirname, 'src/components'),
    },
    extensions: ['*', '.js', '.vue', '.json']
  },

Leave a comment