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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      <button @click="sayHello">Hello</button>
      <span v-if="showHello">&nbsp;World!</span>
    </p>
    <p>
      <input type="text" v-model="myName" label="Your name:" />
    </p>
    <p v-if="myName">Hello to you too.. {{ myName }}</p>
  </div>
</template>

<script>
  export default {
    name: "HelloWorld",
    data() {
      return {
        myName: null,
        showHello: false,
      };
    },
    methods: {
      sayHello() {
        console.log("hello world");
        this.showHello = !this.showHello;
      },
    },
    props: {
      msg: String,
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h3 {
    margin: 40px 0 0;
  }
  a {
    color: #42b983;
  }
</style>

I do not believe in seeing code on stupid sites. Show me how to do it.

Install node.
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.

  cd program1

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.

• <template>
  
  This is where the ‘UI’ part of the ‘UI’ goes to achieve its dream.
  
  
  ‘template’ section consists of the HTML /render of the component. You can input HTML, call Javascript, reference component states - data & props, provide style tags, and, in general, have a terrifying time when labels don’t get aligned.
  
  
  You can also embed other components.
  
  
  
• <style>
  
  
  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.
  
  
  
• <script>
  
  
  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:

1. data: initialize and store component states

2. methods: manipulate data

3. props: pass data across components

4. computed: calculated properties

5. components: reference other components that you want to use in <template>

6. and many more.. incl. filters, component life cycle methods like mounted(), destroyed(), etc.

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 default part are just objects. data is an exception.

• Component life cycle methods like mounted() are also functions, but they are not within <script>!).

• 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 data in 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.

Single file components are made possible with build tools, which are enabled through Vue CLI. The components are compiled to “normal” Javascript for run-time.