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>
Source:stackexchange.com