Vue.js basics tutorial. How to start with this framework?

Vue.js is a progressive framework that makes it easy to build web-based applications. It lets you compose complex UIs from small and isolated pieces of code called ‘components’. Declarative views make your code more predictable and easier to debug.

How to start with Vue.js?

The most recommended way to create the Vue.js project is Vue CLI. To install it just type:

npm install -g @vue/cli

and then create a project:

vue create simple-project
cd ./simple-project

Finally, you can run your project:

npm run serve

Create a simple component

Thanks to webpack and vue-loader plugin we can create components in .vue files. Every component includes the template with an HTML view, a script with logic and style with CSS styling.

Let’s create simple VArticle.vue component in simple-project/src/components/VArticle.vue file, and the following content:

<template>
  <div class="article">
    <h1 class="article__title">
      {{ article.title }}
    </h1>
    <span class="article__author">
      {{ article.author }}
    </span>
    <p class="article__lead">
      {{ article.lead }}
    </p>
  </div>
</template>

<script>
export default {
  props: {
    article: Object
  }
}
</script>

<style>
  .article {
    margin-bottom: 20px;
    border: 1px solid #BBBBBB;
    display: inline-block;
    padding: 20px;
    min-width: 400px;
  }

  .article__title {
    font-weight: bold;
  }

  .article__author {
    font-size: 12px;
  }

  .article__lead {
    font-weight: 300;
  }
</style>

To use a previously created component we need to set simple-project/src/App.vue file content to:

<template>
  <div>
    <div
      v-for="article in articles"
      :key="article.id"
    >
      <v-article
        :article="article"
      />
    </div>
  </div>
</template>

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

export default {
  name: 'app',
  components: {
    VArticle
  },

  data () {
    return {
      articles: [{
        id: 1,
        title: 'Article 1',
        lead: 'This is lead of first article',
        author: 'John'
      }, {
        id: 2,
        title: 'Article number two',
        lead: 'This is lead of second article',
        author: 'Lukasz'
      }]
    }
  }
}
</script>

Now when you open a browser on http://localhost:8080/ you should see a screen like:
VArticle

What’s next?

In this tutorial, I’ve tried to show you how to start your adventure with the Vue framework.
If you are curious about how to create more advanced components, you will certainly find them in our open source vuelendar project.

Read also:

– GraphQL: lessons learned in production

– Optimizing code with Query Objects

Testing JavaScript…with Ruby?!

Next

Let's start a project

Estimate project