Vue provides what are called ‘Single File Components’ (SFC) that make the development process easier.
Completely new to Vue? Head over to another post and get to know Vue.
One of the big advantages of Vue is the fact that it can be deployed in multiple ways in your app. You can link Vue CDN link and just start using it for simple purposes, or use the full scale development environment setup by Vue CLI.
While technically you can structure either Vue however you want, established conventions make everyone’s life a bit better. Vue SFC is the place to be in when coding Vue, and it only makes sense that we look at SFC structure in this post.
A Basic Structure for Single File Components
First, some code. Below is a simple Vue SFC.
I do not believe in seeing code on stupid sites. Show me how to do it.
Open command prompt and type in following.
npm i -g @vue/cli cd c:\dev vue create program1
Select ‘default option to keep the installation minimally functional. Now, you will see a bunch of things being installed.
Open ‘HelloWorld.vue’ in ‘src/components’ folder. Replace all code with the code provided at the beginning of this post.
Now is a good time as any to run the damn thing.
npm run serve
You feel that this is too much work? Head over to codesandbox.io. Click ‘Create Sandbox’, select ‘Vue’ template, copy code outlined above and you are done.
Finally the topic of the day: SFC structure
The typical structure of a single file component will include the following sections.
This is where the ‘UI’ part of the ‘UI’ goes to achieve its dream.
You can also embed other components.
This is where you input most of CSS specific to the component. The ‘scope’ keyword keeps style local to the component. Although you could copy/paste CSS in multiple components to apply same local styling, there are better ways to manage that.
This is my favourite part of Vue components. It is also the part where I tend to test all the walls at my work place - with my head.
Scripts can consist any of the following:
data: initialize and store component states
methods: manipulate data
props: pass data across components
computed: calculated properties
components: reference other components that you want to use in
and many more.. incl.
filters, component life cycle methods like
You will see that -
Clear segregation within the Vue component helps in better understanding of the component. Vue components feel intuitive and are easier to learn.
All the sections within
export defaultpart are just objects.
datais an exception.
Component life cycle methods like mounted() are also functions, but they are not within
Data is preferred as a function, but can be an object too. If data is an object, multiple instances of the component will share same values of the properties. This is typically not what you want to do, and therefore data is a function.
You can just use a variable declared in
datain the UI
<template>section. It only requires that much work to make a component ‘reactive’ - change UI and respond to data changes. You can test this by providing any string in the text box.