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.