laptop on a dark background

Vue | Getting Started

A couple of months ago I’ve started learning Vue.js 👩‍💻 over at CodeCademy and then moved over to Udemy once that was done.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces.

I was a big fan of AngularJS or Angular2 if you will, but never really got into React, just didn’t click with me sadly. That’s where Vue came in. If I can be opinionated, Vue is like a child of React and Angular, so if you’ve done either of them – you’ll be alright with Vue.

First Time With Vue? No worries 😄

Remember how in Angular we have ‘ng-something’, right?
In Vue that becomes ‘v-something’ instead 😀

Seeing this little example might make you feel more at home.

Here’s the official documentation if for some reason you had trouble finding it: << Vuejs.org >> I will be referencing it throughout this article.

What should you use: CDN vs CLI

Vue CDN | ELI5

If you want to play around or make a small static page for yourself such as a simple portfolio or a simple marketing/contact page – CDN is your boy.

Using a CDN is super simple, all you got to do is place a link to Vue within your HTML file and you’re good to go. This link will show you how.

This will allow you to use Vue while not requiring a whole server to be built and an ocean of packages within your project. Don’t worry, you will still get the Vue experience but you won’t be able to ‘customise’ your build if that makes sense.

You’ll be able to have a nice, simple but dynamic page, showing content such as text and images as well as some functionality or forms.

But beware, this is not the way forward if you’re planning to have something more than a simple, standalone page or a smaller feature 😜

VueCLI via npm | ELI5

VueCLI is installed trough your Terminal (command prompt) by inserting an npm install command like this:

npm install -g @vue/cli

Since VueCLI is an npm package you will get a node_modules folder as well as package-lock.json file if you haven’t had it already, after running this command. If you did, then it would get updated.

The Vue CLI hides the complexity of having to know babel or webpack and any other complicated sounding words, allowing you to run builds and watch for changes in an easy way.

You can run another command in your terminal which will create and set up a project ‘skeleton’ for you.

vue create hello-world

With this we’re telling Vue to ‘create’ a project called ‘hello-world’. You can name this however you want but I copied it from official docs so that you know what to look for in here, if you want to read more.

Running this command will start a questionnaire to make sure you create your new project exactly how you wanted it to be 😜

It will ask you would you like Vue2 or Vue3, would you like support for babel or maybe eslint and so on. Once you’re finished picking what you wanted to load in, your project will start building.

When it’s finished it will look something like this and you’ll be able to run this command and visit your localhost to see it in action:

npm run serve

  1. node_modules folder is where all your packages live.
    (leave it be)
  2. public folder is where you will see a favicon and an index.html file which are presented to ‘the public’.
    (leave it be unless you want to change favicon, that’s alright)
  3. src folder is where the files you want are in. This will contain your components folder, assets, views, your App.vue and main.js file.
    (this is where we make and break stuff)

Third Option: Vite

Our third option is Vite. Vite, pronounced /veet/, is a fairly new thing in Vue and I’ve had a chance to hear about it on VueConf Toronto 2020 Online but haven’t used it myself just yet. It’s a native ESM powered web build tool.

Sounds complicated right? Let’s see what ESM means:


The ESM (EcmaScript Modules) specification introduced with the ES6 (or ES2015) norm describes how import and export modules in JavaScript.

  1. Vite is also used trough terminal commands and can quickly set up your projects.
  2. You can use Vite with any other frameworks you want, or in other words Vite is framework agnostic.
  3. It’s super fast! Have a look at the screenshot below focusing on speed comparisson between Vite and Vue CLI.

If you’re looking into Vite, I’d suggest looking into VuePress and VitePress as well but I won’t talk about those in this post.

CONCLUSION:

Vue is new and shiny but it’s also easy to learn and super powerful. It has a fairly large ecosystem and there’s lots to learn and read about.

Easiest way to learn more about Vue’s ecosystem (apart from googling) is to create a project and visit localhost. It will display content from our HelloWorld component we loaded to our index.html when used ‘vue create hello-world’ command earlier which contains some valuable links for you.

Vue’s community seems super productive, talkative and inclusive so you might as well join their communities on slack, discord and social media.

⚉ How are you finding Vue❓
⚉ Have you been building something cool❓

Make sure to let me know your thoughts and show off your recent projects over on Instagram or my contact page 💛

Leave a Reply