Single file Vue component

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

Once I create the project with vue-cli I am going to create 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)
})

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

npm run dev