DEV Community

Cover image for Getting started with Vuejs
Peace
Peace

Posted on • Originally published at dev.to

Getting started with Vuejs

Header Image

What is Vuejs?

Vue is a frontend JavaScript framework for building websites & user interfaces

  • Vue is generally used to create single-page apps that run on the client.
  • Vue can also run on the server-side by using SSR framework like Nuxt.

Why use Vue?

  • Create dynamic frontend apps and websites.
  • Easy learning curve
  • Easy to integrate with other projects.
  • Fast and lightweight.
  • Extremely popular (and rising).

What should you know first?

Like with any framework, you should be comfortable with the underlying language first. In this case, that is JavaScript

  • JavaScript Fundamentals
  • Async Programming (Working with promises)
  • Array Methods (forEach, map, filter, etc)
  • Since you'll be dealing with APIs to make requests, it's important to understand "Fetch API/HTTP Requests"
  • You should also have an experience with Yarn or NPM(Node Package Manager) because you're going to be installing other packages to give you extra functionalities.

Getting Started

1. Installation

npm install -g @vue/cli
Enter fullscreen mode Exit fullscreen mode
OR
yarn global add @vue/cli
Enter fullscreen mode Exit fullscreen mode

2. Create a New Project

vue create vue-project
Enter fullscreen mode Exit fullscreen mode
Warning

If you are on Windows using Git Bash with minTTY, the interactive prompts will not work. You must launch the command as winpty vue.cmd create vue-project. If you however want to still use the vue create vue-project syntax, you can alias the command by adding the following line to your ~/.bashrc file. alias vue='winpty vue.cmd' You will need to restart your Git Bash terminal session to pull in the updated bashrc file.

You will be prompted to pick a preset. You can either choose the default preset which comes with a basic Babel + ESLint setup, or select "Manually select features" to pick the features you need.

Alt Text

The default setup is great for quickly prototyping a new project, while the manual setup provides more options that are likely needed for more production-oriented projects.

Alt Text

If you chose to manually select features, at the end of the prompts you also have the option to save your selections as a preset so that you can reuse it in the future.

3. Run the project

Open the project directory in your terminal and run this command.

npm run serve
Enter fullscreen mode Exit fullscreen mode

Expected output:
image

Copy and paste the link in your browser to see the output.

http://localhost:8080/ 

Enter fullscreen mode Exit fullscreen mode

You may play around with the Helloworld default component but before you do that, let's talk more about components and routers then we shall go deep into the codes in the next article.

Components

Components are reusable Vue instances with a name.

Basic Layout of a Vue Component

Here is an example of a button component.

<template>
<button @click="onClick()" :style="{background: color}" class="btn">{{ text }}</button>
</template>

<script>
export default {
    methods: {
    onClick() {
    console.log("Button Clicked!")
    },
},
    name: 'Button',
    props: {
        text: String,
        color: String,
    },
}

</script>

<style scoped>
  .btn {
  background: #000;
  color: #fff;
}
<style>

Enter fullscreen mode Exit fullscreen mode

Components include a template for markup, logic including any state/data/methods as well as the styling for that component.

using props is a way of passing a unique data from external components.
The Button component above can be reused by other components as shown below.

Here is a Header component.

<template>
    <header>
        <h2>Title</h2>
        <Button :text="Add Task" :color='green'/>
    </header>
</template>

<script>
import Button from './Button'

export default {
    name: 'Header',
    components: {
        Button
    }
}
</script>

<style scoped>
header {
    display: flex;
    justify-content: space-between;
    align-items: cetner;
    margin-bottom: 20px;
}
</style>
Enter fullscreen mode Exit fullscreen mode

For the Button component to be reused, we needed to first import the Button and include it in the components inside the script tag.

export default {
    name: 'Header',
    components: {
        Button
    }
}
Enter fullscreen mode Exit fullscreen mode

Vue Router

Routing allows us to create a single page application without unnecessary reloads during the navigation. To do this we need to first install vue-router.

npm install vue-router
Enter fullscreen mode Exit fullscreen mode
Let's do the routing

Create router folder in the root directory of the project.
inside the router folder, create index.js.

To create a router for a certain page (About, Home, Contact,..) you need to first import the component(Page).

import About from '../views/About'
Enter fullscreen mode Exit fullscreen mode

And specify the router for your page.

const routes = [
    {
        path: '/about',
        name: 'About',
        component: About
    }
]
Enter fullscreen mode Exit fullscreen mode
Below is a an example of my index.js in router folder
import {createRouter, createWebHistory} from 
'vue-router'
import About from '../views/About'

const routes = [
    {
        path: '/about',
        name: 'About',
        component: About
    }
]

const router = createRouter({
    history: createWebHistory(process.env.
        BASE_URL),
        routes
})

export default router
Enter fullscreen mode Exit fullscreen mode

The next step is to use the router in the main.js file found in the root folder of your vue-project.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
.use(router)
.mount('#app')
Enter fullscreen mode Exit fullscreen mode

Include the router in your App.vue template tags.

    <router-view></router-view>
Enter fullscreen mode Exit fullscreen mode

Now you're good to go. You may use the routers in your components for your single page web application:
Instead of using:

 <a href="/about">About</a>
Enter fullscreen mode Exit fullscreen mode

You need to use:

<router-link to="/about">About</router-link>
Enter fullscreen mode Exit fullscreen mode

Thank you for visiting this post, I hope you've learnt a lot. Feel free to comment down below if you have any questions or you want to say something.

Discussion (13)

Collapse
dmutoni profile image
Denyse

nice one Peace 👌🥳🥳

Collapse
cyebukayire profile image
Peace Author

Thank you:)

Collapse
skypy profile image
Kinjal

Very good example for the beginners.

Collapse
olanetsoft profile image
Olubisi Idris Ayinde💡

Nice Article 🥳 Keep it up

Collapse
cyebukayire profile image
Peace Author

Thank you:)

Collapse
blessingartcreator profile image
Blessing Hirwa

That was a quick tutorial for anyone who wants to get started with vue. Keep it up 👌

Collapse
cyebukayire profile image
Peace Author

Thank you:)

Collapse
knowbee profile image
Bruce

Very well written and articulated tutorial! keep up the good work

Collapse
cyebukayire profile image
Peace Author • Edited

Thank you:)

Collapse
kobsharon profile image
Shallon Kobusinge • Edited

This is amazing, a very helpful article
keep it up...

Collapse
cyebukayire profile image
Peace Author

Thank you:)

Collapse
honorine22 profile image
honorine

Very helpful article. Keep up the good work.

Collapse
cyebukayire profile image
Peace Author

Thank you:)