Go to content
The Codest
  • About Us
    • Staff Augmentation
    • Project Development
    • Cloud Engineering
    • Quality Assurance
    • Web Development
  • Our Team
  • Case studies
    • Blog
    • Meetups
    • Webinars
    • Resources
Careers Get in touch
  • About Us
    • Staff Augmentation
    • Project Development
    • Cloud Engineering
    • Quality Assurance
    • Web Development
  • Our Team
  • Case studies
    • Blog
    • Meetups
    • Webinars
    • Resources
Careers Get in touch
2019-03-14
Software Development

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

Lukasz Usarz

Senior Software Engineer

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

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.

Related articles

Software Development

3 Useful HTML Tags You Might Not Know Even Existed

Nowadays, accessibility (A11y) is crucial on all stages of building custom software products. Starting from the UX/UI design part, it trespasses into advanced levels of building features in code. It provides tons of benefits for...

Jacek Ludzik
Software Development

5 examples of Ruby’s best usage

Have you ever wondered what we can do with Ruby? Well, the sky is probably the limit, but we are happy to talk about some more or less known cases where we can use this powerful language. Let me give you some examples.

Pawel Muszynski
Software Development

Maintaining a Project in PHP: 5 Mistakes to Avoid

More than one article has been written about the mistakes made during the process of running a project, but rarely does one look at the project requirements and manage the risks given the technology chosen.

Sebastian Luczak
Software Development

Why you will find qualified Ruby developers in Poland?

Real Ruby professionals are rare birds on the market. Ruby is not the most popular technology, so companies often struggle with the problem of finding developers who have both high-level skills and deep experience; oh, and by the...

Jakub
Software Development

9 Mistakes to Avoid While Programming in Java

What mistakes should be avoided while programming in Java? In the following piece we answers this question.

Rafal Sawicki
Software Development

A quick dive into Ruby 2.6. What is new?

Released quite recently, Ruby 2.6 brings a bunch of conveniences that may be worth taking a glimpse of.  What is new? Let’s give it a shot!

Patrycja Slabosz

Subscribe to our knowledge base and stay up to date on the expertise from industry.

About us

The Codest – International Tech Software Company with tech hubs in Poland.

    United Kingdom - Headquarters

  • Office 303B, 182-184 High Street North E6 2JA London, England

    Poland - Local Tech Hubs

  • Business Link High5ive, Pawia 9, 31-154 Kraków, Poland
  • Brain Embassy, Konstruktorska 11, 02-673 Warsaw, Poland
  • Aleja Grunwaldzka 472B, 80-309 Gdańsk, Poland

    The Codest

  • Home
  • About us
  • Services
  • Case studies
  • Know how
  • Careers

    Services

  • PHP development
  • Java development
  • Python development
  • Ruby on Rails development
  • React Developers
  • Vue Developers
  • TypeScript Developers
  • DevOps
  • QA Engineers

    Resources

  • What are top CTOs and CIOs Challenges? [2022 updated]
  • Facts and Myths about Cooperating with External Software Development Partner
  • From the USA to Europe: Why do American startups decide to relocate to Europe
  • Privacy policy
  • Website terms of use

Copyright © 2022 by The Codest. All rights reserved.

We use cookies on the site for marketing, analytical and statistical purposes. By continuing to use, without changing your privacy settings, our site, you consent to the storage of cookies in your browser. You can always change the cookie settings in your browser. You can find more information in our Privacy Policy.