Create your first app with Vue.js

Share
  • April 30, 2019

f you’ve never created a Vue.js application, I am going to guide you through the task of creating one, and understanding how it works.

First example

First I’ll use the most basic example of using Vue.

You create an HTML file which contains

and you open it in the browser. That’s your first Vue app! The page should show a “Hello World!” message.

I put the script tags at the end of the body so that they are executed in order after the DOM is loaded.

What this code does is, we instantiate a new Vue app, linked to the #exampleelement as its template (it’s defined using a CSS selector usually, but you can also pass in an HTMLElement).

SEE ALSO: A developer’s introduction to React

Then, it associates that template to the data object. That is a special object that hosts the data we want Vue to render.

In the template, the special {{ }} tag indicates that’s some part of the template that’s dynamic, and its content should be looked up in the Vue app data.

See on Codepen

You can see this example on Codepen:

Codepen

Codepen is a little different from using a plain HTML file, and you need to configure it to point to the Vue library location in the Pen settings:

Pen settings

Second example: The Vue CLI default app

Let’s level up the game a little bit. The next app we’re going to build is already done, and it’s the Vue CLI default application.

What is the Vue CLI? It’s a command line utility that helps to speed up development by scaffolding an application skeleton for you, with a sample app in place.

There are two ways you can get this application.

Use the Vue CLI locally

The first is to install the Vue CLI on your computer, and run the command

Use CodeSandBox

A simpler way, without having to install anything, is to go to CodeSandBox

CodeSandbox is a cool code editor that allows you build apps in the cloud, which allows you to use any npm package and also easily integrate with Zeit Now for an easy deployment and GitHub to manage versioning.

That link I put above opens the Vue CLI default application.

Whether you chose to use the Vue CLI locally, or through CodeSandbox, let’s inspect that Vue app in detail.

The files structure

Beside package.json, which contains the configuration, these are the files contained in the initial project structure:

  • index.html
  • src/App.vue
  • src/main.js
  • src/assets/logo.png
  • src/components/HelloWorld.vue

index.html

The index.html file is the main app file.

In the body it includes just one simple element: 

. This is the element the Vue application will use to attach to the DOM.

src/main.js

This is the main JavaScript files that drive our app.

We first import the Vue library and the App component from App.vue.

We set productionTip to false, just to avoid Vue to output a “you’re in development mode” tip in the console.

Next, we create the Vue instance, by assigning it to the DOM element identified by #app, which we defined in index.html, and we tell it to use the App component.

src/app.vue

App.vue is a Single File Component. It contains 3 chunks of code: HTML, CSS and JavaScript.

This might seem weird at first, but Single File Components are a great way to create self-contained components that have all they need in a single file.

We have the markup, the JavaScript that is going to interact with it, and style that’s applied to it, which can be scoped, or not. In this case, it’s not scoped, and it’s just outputting that CSS which is applied like regular CSS to the page.

The interesting part lies in the script tag.

We import a component from the components/HelloWorld.vue file, which we’ll describe later.

This component is going to be referenced in our component. It’s a dependency. We are going to output this code:

from this component, which you see references the HelloWorld component. Vue will automatically insert that component inside this placeholder.

src/components/helloworld.vue

Here’s the HelloWorld component, which is included by the App component.

This component outputs a set of links, along with a message.

Remember above we talked about CSS in App.vue, which was not scoped? The HelloWorld component has scoped CSS.

You can easily determine it by looking at the style tag. If it has the scopedattribute, then it’s scoped: