This post was written by Bitbucket user Nirmatt Gopal.
Vue.js has been gaining traction among frontend devs for a while now. This tutorial is aimed at beginners who want to dive into the world of Vue.js. This tutorial provides a starting point for developing a frontend single page application. You can structure your projects according to the one mentioned here. I have saved this as a template and have been using the same for many of my personal projects.
A basic knowledge of development in Node.js would be an advantage.
1. Introduction
1.1 What is Vue.js
Vue.js is a frontend javascript framework which can be used to build user interfaces. It is open source and is constantly updated. A roadmap on their development can be found here Vue.js Roadmap.
Vue.js is supported by an extensive ecosystem which supports many developer needs without having to rely on external libraries.
1.2 Why use Vue.js
Vue is easier to learn when compared to other frontend JS frameworks. Vue requires minimal HTML, JS and CSS knowledge to get started. Features that are typically difficult to understand like dependency injection and DOM manipulation are abstracted so that anyone can jump right into frontend development with Vue.js.
It is smaller and faster and is highly progressive i.e, additional modules can be stacked upon the existing core library as the requirements build up. Vue combines the best of Angular and React and many other front-end frameworks. And it is supported by a large open source community.
Here's more info on how Vue compares to other JS frameworks.
2. Adding a git repository
2.1 Create new Bitbucket account
Go to Bitbucket and click on 'Get started for free' button.
2.2 Download Sourcetree
After creating Bitbucket account, go to Sourcetree and download it for your OS. Sourcetree is free, so no worries.
In my opinion, Sourcetree is much better than most other git GUIs! It abstracts away all the git commands. If you are not a fan of remembering all the git commands, you will love this piece of software.
2.3 Create a new repo
Open Sourcetree and click on Create:
Provide an empty folder and name and create a repo for your bitbucket account:
3. Creating a new app
3.1 Install npm
Installing Node.js is a prerequisite. Download the latest version from node js, LTS version would suffice our need. We will also need node package manager(npm) which comes with the installer. Npm is a CLI which helps in managing js libraries.
After installation, confirm npm is installed by typing in the cmd:
npm --versionThe will display the currently installed version.
A Vue application will not work by itself on heroku. We need an Express.js app to serve the files built from the Vue app.
3.2 Install Vue CLI
We have to install Vue CLI for harnessing the awesome power of Vue. Run cmd and type this in:
npm install -g @vue/cli-g installs the CLI globally, so that you can access the CLI from anywhere in the PC. It may take a while, so be patient.
3.3 Create a new project
A new project can be created using this syntax: vue create <project-name>
Hence, to create a project named vue-frontend:
vue create vue-frontend -n
-n flag is to skip git initialising in the folder.
You will be asked to pick a preset or to manually select the features. Let's select our features manually like in the screenshot:
I have chosen minimal options to start the project, but enough to cover most of the vue related topics.
Babel – This is used to make the application compatible with browsers, so that we can use all the new features of javascript.
Router – Official router of Vue, helps in setting up the routes for different pages.
Vuex – Vue, being a declarative framework, handles the storage using vuex.
Choose 'Yes' for 'Use history mode for router?' and save the preset if you feel so.
Go in the newly created folder and run Npm run serve.
You can find your base application running at http://localhost:8080/
3.4 Create a new sample page
Time to fire up your code editor. I personally prefer VSCode, but you can choose any.
We have to add 1 page and modify 2 files:
Add a new file 'Newpage.vue' in src>views folder
Fill the new vue file with following:
<template>
<div class="newPage">
<h1>This is a new page</h1>
</div>
</template>This is just a template to test if our new page is visible. More functionality can be implemented later and built upon this.
Go to App.vue file and add a link to your new page like so:
<router-link to="/newpage">Page 3</router-link>
But we still haven't configured a way to tell our application where to look for this specific page. We will add this to router.js file:
Import the new page as a component and run this code:
Import NewPage from './views/Newpage.vue'
Then point the router to our page component:
Go to the browser and see that Page 3 link is already visible there. This is because of the hot-reloading feature. Click on the new page's link and ensure that it is working:
4. Commiting code to cloud repository
4.1 The First Commit
Open Sourcetree and you will see the new files ready for staging. Stage all the files:
Write your commit message below in message box and click on Commit:
You can optionally push to the Bitbucket cloud using the Push button:
In this post, I have shown how to build a basic working template to get started with Vue js project. This template can be used to build a wide variety of functionalities upon. This template can be extended for scaling the web applications that you plan.
Author bio: Nirmatt Gopal is an avid anime fan and a huge gaming geek. He has been working as a Software Engineer for the past 3 years. He always strives to discovers what he doesn’t know and to teach others what they could have known.
Outside of work, he reads and writes science fiction. El Psy Congroo!
Love sharing your technical expertise? Learn more about the Bitbucket writing program.
