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