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

OR

yarn global add @vue/cli

2. Create a New Project

vue create vue-project

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.

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.

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

Expected output:

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

http://localhost:8080/ 

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>

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>

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
    }
}

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

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'

And specify the router for your page.

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

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

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')

Include the router in your App.vue template tags.

    <router-view></router-view>

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>

You need to use:

<router-link to="/about">About</router-link>

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.