days
-1
-2
hours
-1
-2
minutes
-2
-5
seconds
-2
-2
search
Time for a 101

Create your first app with Vue.js

Flavio Copes
vue.js
© Shutterstock / 31moonlight31  

If you’ve never created a Vue.js application, Flavio Copes is going to guide you through the task of creating one and understanding how it works. The app you’re about to build is the Vue CLI default application. Happy coding!

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: <div id="app"></div>. 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: <style scoped>

This means that the generated CSS will be targeting the component uniquely, via a class that’s applied by Vue transparently. You don’t need to worry about this, and you know the CSS won’t leak to other parts of the page.

The message the component outputs is stored in the data property of the Vue instance, and outputted in the template as {{ msg }}.

Anything that’s stored in data is reachable directly in the template via its own name. We didn’t need to say data.msg, just msg.

Run the app

CodeSandbox has a cool preview functionality. You can run the app and edit anything in the source to have it immediately reflected in the preview.

The Vue App

This article was originally published on Flavio Copes’ blog.

    DevOpsCon Whitepaper 2018

    Free: BRAND NEW DevOps Whitepaper 2018

    Learn about Containers,Continuous Delivery, DevOps Culture, Cloud Platforms & Security with articles by experts like Michiel Rook, Christoph Engelbert, Scott Sanders and many more.

bgiugiq

Author
vue.js

Flavio Copes

Flavio is an Indie Hacker and Computer Engineer. He writes tutorials for devs on Tutorials for Coders The Vue Handbook, and Vue.js Essentials. Follow him on Twitter @flaviocopes.


Leave a Reply

Be the First to Comment!

avatar
400
  Subscribe  
Notify of