DEV Community

loading...

Very Simple Vue 3 Tutorial

Harlin Seritt
I work at Hyland as a professional services consultant which means I get to do everything (systems, development and advice) and work closely with customers.
・6 min read

Alt Text

This is just a simple Vue 3 tutorial. I thought I would create a very simple one to just show someone how to get started with it.

It doesn't do a lot but I think it does a very good job of explaining some of the more basic things that Vue does. If you follow this and understand it, I think it will help you get an idea of what the workflow of Vue looks like. If you can do that with any framework, I believe you can grasp it a lot faster than just working through a big project right off the bat before you're familiar with the technology.

Prerequisites

  • You have node installed with npm.
  • You have Chrome installed (or know how to work with the dev tools in Firefox or IE).
  • You are comfortable with the command line.

My Environment

I am using Ubuntu 20.04. It should work the same with Mac OS or Windows 10.

The setup

We will need to install the vue cli tool.

From the command line it's good to install it globally so that we can use it anywhere:

> npm install -g @vue/cli
Enter fullscreen mode Exit fullscreen mode

Next, create the example application. You can call it whatever you like. Mine is called example-app.

> vue create example-app
Enter fullscreen mode Exit fullscreen mode

If prompted, select the Vue 3 option:

❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Enter fullscreen mode Exit fullscreen mode

Change working directory to example-app or whatever you want to call your vue app.

> cd example-app
Enter fullscreen mode Exit fullscreen mode

Start up Vue

Now, let's start up our Vue application:

> yarn serve
Enter fullscreen mode Exit fullscreen mode

You should be able to navigate to http://localhost:8080 in your web browser and see a generic Vue landing page.

Alt Text

At this point it should show successfully and there should be no errors.

Now, open your editor and set your project folder to the folder where your application (example-app) is the editor's application folder. Of course, to do this, you may need to open another tab in your console or open another console in the same directory.

With most modern editors I can just do:

> sublime .
  or
> atom .
  or
> code .
Enter fullscreen mode Exit fullscreen mode

In your editor navigate to example-app/src/App.vue. (On Windows it will appear as example-app\src\App.vue)

We want to set up our App.vue file in a very basic manner so that we can more easily learn what the different parts of a Vue file do.

In each *.vue file, we typically have three sections:

  • Template
  • Script
  • Style

The template section is our html used to render our app in the browser.

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
Enter fullscreen mode Exit fullscreen mode

The script section is the actual JavaScript code used for our app's logic.

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

And as you can guess, the style section is for styling our app with css.

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Let's start tinkering a bit.

Inside App.vue, remove the template and script sections but leave only:

<template>

</template>
Enter fullscreen mode Exit fullscreen mode

and

<script>
export default {
  name: 'App',
}
</script>
Enter fullscreen mode Exit fullscreen mode

For now we can leave the style section as is. We won't be modifying that for this tutorial. If you've ever worked with CSS before, this part should be mostly self-explanatory anyways. Just know that the styling in this .vue file only applies to the template elements here.

This will give us a very plain Vue app (and incomplete app as you will see).

Now, you should open http://localhost:8080 with Developer Tools open in the browser.

In the console and browser we should see this error:

Alt Text

This means we need to set a div element with an ID of "app". To fix this error, change the template area to look like this:

<template>
  <div id="app">

  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

Save it and now we should get no errors. But there will be a blank page.

We'll fix that with a simple Hello World message. Change the template to look like this:

<template>
  <div id="app">
    <p>Hello World!</p>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

We should now see "Hello World!" in the browser.

Alt Text

Eh not so exciting? Right. Let's add some data into Vue and we'll display that instead of Hello World!.

Here is how we can add a simple "person" object and an "articleCount" variable:

<script>

export default {
  name: 'App',

  data() {
    return {
      articleCount: 0,
      person: {
        firstName: 'Harlin',
        lastName: 'Seritt',
      }
    }
  },

}
</script>
Enter fullscreen mode Exit fullscreen mode

Here, our data will expose a couple of variables called articleCount (we're initializing it to zero) and person. Feel free to add your name instead of mine!

So that we can show our person's first name, last name and the article count, let's add the following into the template area:

<template>
  <div id="app">
    Hi {{ person.firstName }} {{ person.lastName }}!<br>
    Number of articles: {{ articleCount }}<br>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

Save it and check the browser page. Update if needed.

Alt Text

Ok, this is pretty cool. You can see how simple it is to add some dynamic data in our vue app.

Let's go one small step further. We'll create a custom computed function that handles combining the first name and last name to become "fullName" so that we just use that instead of both first and last names.

Add the "computed" section below into the script area:

export default {
  name: 'App',

  data() {
    ...
  },

  computed: {
    fullName() {
      return `${this.person.firstName} ${this.person.lastName}`;
    }
  },

}
</script>
Enter fullscreen mode Exit fullscreen mode

Anything we add as computed will be available as a variable in our template section.

Now, we can reference fullName in the template area (replacing the combined firstName and lastName interpolations):

<template>
  <div id="app">
    Hi {{ fullName }}!<br>
    Number of articles: {{ articleCount }}<br>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

This was a very simple computed value but I wanted to show you this so you could see how simple it was to add it here.

Now, let's add a button that will increase our article count by one every time it's clicked.

First, let's create a simple method called addArticle to increase the number of articles by one:

<script>

export default {
  name: 'App',

  data() {
    return {
      articleCount: 0,
      ...
    }
  },

  computed: {
    ...
  },

  methods: {
    addArticle() {
      this.articleCount++;
    }
  }

}
</script>
Enter fullscreen mode Exit fullscreen mode

To enact the addArticle method, let's create a button to reference the addArticle method to the template area:

<template>
  <div id="app">
    Hi {{ fullName }}!<br>
    Number of articles: {{ articleCount }}<br>

  <button @click="addArticle">
      Add Article
    </button>
  </div>

</template>
Enter fullscreen mode Exit fullscreen mode

Notice the @click="addArticle" we used in the button element. We can use @click instead of v-on:click here. You can use either though if you wish. This is saying that if we click on this button it will call the addArticle method which increases articleCount by one.

Save the App.vue file and now we should see our button.

Alt Text

Let's click on it a few times. The articleCount number should increase by one each time it's clicked.

Alt Text

Voila! We have increased our number of articles with very little effort!

Now, I want to show the watch directive that we can use to trigger other code to run each time something changes.

We'll add a watch directive that will watch articleCount every time it is modified:

<script>

export default {
  name: 'App',

  data() {
    return {
      articleCount: 0,
      ...
    }
  },

  watch: {
    articleCount(newArticleCount, oldArticleCount) {
      if (newArticleCount !== oldArticleCount) {
        console.log('new article added');
      }
    }
  },

  computed: {
    ...
  },

  methods: {
    ...
  }

}
</script>
Enter fullscreen mode Exit fullscreen mode

Notice that we create a function with the name of the variable we want to "watch." This function will take the new count and the old count as parameters. We can make a simple comparison and take some action (a console.log call here).

Alt Text

And now we can see in our console every time a new article is added.

Well, that's it for this tutorial. It was very simple and introduced a few Vue concepts. With some imagination you could probably do a lot of extra stuff from what you learned just now.

Hopefully this gives you an idea of how simple it is to get started with Vue. I plan to do a handful of series on Vue 3. Hope you enjoyed! Stay tuned.

Discussion (2)

Collapse
brianglassanos profile image
B.R. Glass

Thank you for this tutorial! It was very succinct and easy to follow.

Collapse
hseritt profile image
Harlin Seritt Author

Thank you for the kind words!