Getting Started: Vue.js and Visual Studio Code

Click here to share this article on LinkedIn »

Web development in 2018 can feel like it is moving at supersonic speed. For a new developer who is coming at building their own web site for the first time it can be confusing to know exactly where to start.

This tutorial is not actually about building that site, it is intended to help you get a working environment installed on your machine so that you just need to worry about building the code you need with Vue.js and Visual Studio Code.

Vue.js

Vue.js is a modern, progressive javascript framework for building user interfaces, in this case for building a web application. It is one of the top 3 javascript frameworks today (along with React from Facebook and Angular from Google). Unlike those other frameworks, Vue.js was originally created by a single developer, Evan You. It is known for its simplicity, its awesome documentation and the friendly, approachable community.

Vue comes with some great tools to make it easy to get started, particularly a command-line interface which will take care of making sure you have the correct dependencies installed.

Visual Studio Code

Visual Studio Code (VSCode) is a free, open-source, text editor from Microsoft. It has achieved massive popularity since its release due to its plethora of extensions, regular feature additions and the speed and responsiveness of the user interface.

Node.js

Node.js is a javascript runtime build on the V8 engine that comes with Google Chrome, it is pretty much essential for modern javascript development not least because it come with npm, a package manager and script runner which will manage all your application’s dependencies.

Getting started with vue-cli

To get started, first install some software, Node.js downloads for all platforms are available here, and VSCode is available for Mac, Windows and Linux from here.

Once node is downloaded, we can install the Vue.js cli, open up a terminal and enter the following:

npm install -g @vue/cli

If you are running on linux you will need to prefix the command with sudo, and you should see output similar to this.

This command has installed the vue-cli on our machine as a global (hence the -g) package. This means that the “vue” command is available from the command-line. Try it now…..

Now we can use the init command to generate our web application from a template, we will use the webpack-simple template however you do not need to know all about webpack (which is a module builder and a complex topic in its own right) as vue-cli will handle that for you.

vue init webpack-simple my-vue-app

Entering the above command will begin the process of creating a new vue application. It will be created in the directory my-vue-app, you just need to wait for the template to download then answer some configuration questions, it is safe to leave the default answers for now.

Once installed, cd into the new directory and enter:

npm install
npm run dev

These command instruct npm to download all the dependencies your project needs and then launch your application. At this point your terminal should look something like this:

And hopefully your browser will have opened at http://localhost:8080 with a nice welcoming page full of essential links. Congratulations! You have created your first web application with Vue.js.

Getting started with Visual Studio Code

Now we have our skeleton app we can open it in Visual Studio Code. Press Ctrl+C to stop the web server then enter:

code .

This will launch VSCode in the current directory, VSCode is a folder-based editor, it does not require project files like some larger IDE’s such as visual studio. On the left hand side you should see a tree view of the folders in your application.

Expand the src folder and click on App.vue, this should open the file in the right-hand pane. You should also have received a recommendation popup from VSCode prompting you to install the Vetur extension.

Vetur is an amazing extension for VSCode, it gives the following for your Vue single-file components:

• Syntax-highlighting
• Snippet
• Emmet
• Linting / Error Checking
• Formatting
• Auto Completion
• Debugging

So click on install and the extensions tab will open and Vetur should install, once that is done there should be a blue reload button next to the Vetur icon, click this and this:

becomes this!

All the html, javascript and css code is transformed from plain grey to beautiful syntax-highlighted colour.

VSCode has a plethora of extensions for working with javascript, css and other web components, and it is extremely configurable.

Now, go back to your console and start up the server again:

npm run dev

The vue-cli has configured hot module reloading as part of the web server install, this means that you can change your application in VSCode and these changes should be visible immediately in your browser.

Try it now, in App.vue, find the line that sets the msg data field and change it to something else:

Go to your browser and the message should already be updated without the need to restart your server.

What next?

You now have a working environment for creating a web application with Vue.js. To continue this journey there are loads of excellent resources available online. The vue documentation is full of helpful examples, there are tutorials available on youtube and udemy and there are friendly, approachable people on social media who love to share their experiences with Vue.js.

I hope this article was useful, it is my first attempt at writing about coding and would love any feedback.