Creating Your First Vue App

In this tutorial, we’ll be looking at everything you need to build your first app in Vue. We’ll be covering what you need to get started in making your first Vue application.

Creating Your First Vue App

To get started with Vue, you’re first going to need to install the Vue CLI tools. Make sure you have npm installed on your computer (or you can do this in yarn if you prefer), and run the following command:

This is going to give us access to a bunch of tools we’ll need to work with Vue. Now that we’ve done that, open a terminal window and use cd to move into the directory you want to create your Vue app in. For me, that was in my documents, in a folder called ‘vue-app’, so I did this:

Then run the following command to create a new Vue application:

vue create my-new-vue-app

The above line creates a new app called my-new-vue-app. When you run it, you’ll be guided through a set of instructions. Use the arrow keys and enter to select your preferences. For this tutorial, I’ll be using Vue 3 to create our first vue application, which is the latest version of Vue.

Our First Vue App

Now that we’ve made our first app, we’ll have a folder structure that looks a bit like this:

| .git              <-- our git folder
| .gitignore        <-- files we want git to ignore
| babel.config.js   <-- config for babel, which gives us extra JS functionality
| node_modules      <-- all our Javascript dependencies 
| package.json      <-- a list of our Javascript dependencies
| package.lock.json <-- a list of our dependencies, and their dependencies
| public            <-- the location of all our public files and images, and our index file
| src               <-- all of our Vue components
| -> App.vue        <-- our main Vue app file
| -> assets         <-- a place to store all of our images and other assets used in our app
| -> main.js        <-- the file which starts up our Vue app and creates it
| -> components     <-- where we will store different components we'll use in our app

Great, so now we have a fully functioning Vue app. Only it just has one page. Most apps require more than one page, so next up we need to install vue-router. Make sure you are in your my-new-vue-app folder and run the following:

Vue will make a bunch of new files, which lets us configure new pages. If it asks you if you want to use history mode, you can select Y, and this will mean no page load times when the user clicks a link. Vue will now have created a few new files:

| src
| -> router
| --> router.js     <-- the configuration of our different pages
| -> views          <-- a folder to store all our different pages in
| --> About.vue     <-- an example page
| --> Home.vue      <-- an example page

Now we have a basic vue file structure that we can mess around with to make our first Vue App. If you want to see how your app looks so far, run the following command in your my-new-vue-app folder:

Now if you go to http://localhost:8080/ you should see your Vue app ready to go:

Creating New Pages for Your Vue App

If you want to add a new page to your Vue app, create a new file in your views folder. For example, if I wanted to make a contact page, I would make a file called Contact.vue. Each vue file consists of three parts typically: