Single file Vue component

Last Updated: May 28, 2021

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

Product Name Unit Price
Coca Cola 1.00
Sprite 1.20




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