[Vuejs]-How import components?

by

1👍

✅

You can’t import .vue files unless you are using a module bundler like webpack.

However, there are multiple ways of defining a vue component which don’t require you to use .vue files.

For example you can define a component in a file like this:

helloWorld.js

export default {
  template : `<div>{{ message }}</div>`
  data : () => ({
    message : 'Hello World'
  })
}

and then import it like this:

app.js

import HelloWorld from 'helloWorld.js';
new Vue({
  el: '#app',
  components: {
    HelloWorld
  }
});

Just remember to add type="module" when you import your js files into your html:

<body>
  <div id="app">
    <hello-world></hello-world>
  </div>
  <script type="module" src="helloWorld.js"></script>
  <script type="module" src="app.js"></script>
</body>
👤ellisdod

Leave a comment