Getting started with Vuejs
Tags: vue, programming
Published: 2021-09-02 10:13:06


![Header Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mxzhwp6tcf6gtbb7ax5.png)

#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
```javascript
npm install -g @vue/cli
```

###### OR

```javascript
yarn global add @vue/cli
```

###2. Create a New Project

```javascript
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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n0fifejo3j7cgnqejh6b.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1967gvd3n0vjvf7898yi.png)

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.
```javascript
npm run serve
```
Expected output:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abz0fn6awafdxxjc0qj0.png) 
 
Copy and paste the link in your browser to see the output.
```javascript
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.

```html
<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.

```html
<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.

```javascript
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.

```html
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).
```javascript
import About from '../views/About'
```
And specify the router for your page.
```javascript
const routes = [
    {
        path: '/about',
        name: 'About',
        component: About
    }
]
```
######Below is a an example of my index.js in router folder

```javascript
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.
```javascript
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.
```javascript
    <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:
 ```javascript
 <a href="/about">About</a>
```
You need to use:
```javascript
<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.