Single file Vue component

In this tutorial, I am going to make a single file component with Vue.js so you can compile it using Webpack. If you are not familiar with how to work with VUE CLI and webpack please follow this article .

Single file component is the best way to create components for your application.

Once I create the project with VUE CLI I am going to create a new file called ProductTable.vue under the src folder of the project

So this will have the template and script tags where you can write your code easily.

Next, I am going to add some code to the main.js file so that you can load the ProductTable component

import Vue from 'vue'
import ProductTable from './ProductTable.vue'

new Vue({
  el: '#app',
  render: h => h(ProductTable)
})

Finally you can run the following command in the terminal to see the webpage

npm run dev