How to Make a Single Page App in Vue.js Part 2

Introduction

In the first part, I explained how to get Vue.js running and how to edit the HelloWorld.vue component in order to make "Hello World!" show up on the screen. Now in part 2, I am going to go into a little bit more depth on Vue single file components as well as splitting up our hello worlds into two separate ones.

What is a single file component?

Quite simply, a single file component is where your HTML, CSS, and Javascript are all placed into a single file. This encourages building websites out of smaller "Components" that can act individually from each other making your code much more readable and organized.

Back to our app

From our HelloWorld.vue file we should see everything nested into three separate tags. The first being <template> the second being <script> and the third being <style scoped>. Within our <template> tag is housed all of our HTML code which will be the building blocks of our components, our <script> tag contains all of the Javascript for our component, and lastly our <style scoped> tag contains all of our stylings. A quick note that the "scoped" after style indicates that this stylesheet will not affect other components. This allows us to name our HTML classes and Id's more confidently and legibly since we are not worried about side effects. From this file, all we are going to do is remove the word "World!" from "Hello World!".

Create a new component

To create a new component we are going to navigate to our /components folder and then add a new file called World.vue. Once here we should see a completely empty file. Type <vue> within the text editor and hit the tab or enter key and it should auto-populate with a <template>, <script> and <style> set of tags.

After this, we should make sure to name our component. Just like in the HelloWorld.vue, we should type name: "world" between the curly braces of the export default { }

Back in our <template> Tags, we should add a little bit of HTML. Just like our HelloWorld.vue file we should wrap everything in a div <div class="world">. Within that div, we should create an <h1> tag that says "World!" like so <h1>World!</h1>

Connecting Our Component

You might have noticed by now that our component isn't displaying on the screen at the moment. Well, that's because we haven't told anything to mount it! Navigate back up to your app.vue file and it should look like this still.

Now to connect the components we need to import it first. Right below where it says import HelloWorld from './components/HelloWorld.vue' you should type import World from './components/World.vue'. After we have imported the file we need to tell Vue that it is a component. In an object called components: you should just see HelloWorld. You should add an apostrophe after HelloWorld than on the next line add "World". In the end it should look like:

The last thing we need to do is add our component to our <template>. right below where it says <HelloWorld msg="Welcome to Your Vue.js App"/> go ahead and type <World/>

And tada! your just broke up your hello world into two components which are both being displayed!