Sometimes, we want to import Vue.js components with Webpack.
In this article, we’ll look at how to import Vue.js components with Webpack.
How to import Vue.js components with Webpack?
To import Vue.js components with Webpack, we should register it by putting it into the components property object.
For instance, we write
<template>
<top-bar></top-bar>
<div class="message">{{ message }}</div>
</template>
<script>
import TopBar from "./top-bar";
export default {
components: {
TopBar,
},
data() {
return {
message: "Hello World",
};
},
};
</script>
to import the TopBar component with
import TopBar from "./top-bar";
Then we register the TopBar component with
components: {
TopBar,
}
And then we can use it in our template with
<top-bar></top-bar>
Conclusion
To import Vue.js components with Webpack, we should register it by putting it into the components property object.
