Getting Started

VueJS is a terrific Javascript framework used across the world for building user interfaces. Whether you are new to web development or a seasoned veteran, you can find a way to set it up that works for you. Below I have listed four different setup methods for getting started with VueJS so you can start learning and experimenting.

(1) Adding the Vue library via <script> tags My introduction to Vue was over a year ago when I discovered how to add the codebase the way I would add any other JS library — simply by adding the link to the library within <script> tags at the bottom of my html pages.

I used this method of integrating VueJS in my course all the time on JS Fiddle — here is a quick Hello World example in Fiddle, and of course, you could also try it in a CodePen sandbox as well.

As far as how to get to the VueJS library, you can download it directly or use a CDN (here is Vue 2.3.4 on CloudFlare).

This method is equivalent to the way you would add jQuery or some other JS library. To learn more, check out Sarah Drasner’s Replacing jQuery With Vue.js: No Build Step Necessary piece.

(2) Running a local server using the Vue CLI tool. You can download and set up the Command-Line Interface (CLI) tool at cli.vuejs.org and create a project completely from the command line. You’ll need Node JS and npm to get started, and I also recommend checking out Daniel Cook’s terrific Getting Started: Vue.js and Visual Studio Code, which can be adapted to other Integrated Development Environments (IDE’s) or text editors like Sublime Text.

(3) Using the GUI tool after starting it from the command line. Once you have downloaded the CLI, you can also use Vue’s Graphic User Interface (GUI) to create and configure a project by typing vue ui from the command line — and as with teh CLI method, you can edit your code with your favorite text editor or IDE and see your results take place in a browser. The Vue 3 CLI just came out in August, which has a very intuitive screen flow and an awesome set of options for getting started. To explore this method, I followed the second half of Vue CLI 3 Tutorial: How to create Vue project, which worked well for me.

(4) Running from the command line with webpack. You can also build a Vue application with a utility known as webpack. To get started, check out Daniel Cook’s Vue.js and Webpack 4 From Scratch, Part 1.

Take an Intro Course

Vue can sometimes feel like a new language, and it can be challenging to build learning momentum without a structured learning path. Over the past couple months, I have been taking an excellent Udemy Course called VueJS 2 — The Complete Guide with Maximilian Schwarzmüller. The course starts with the JS Fiddle approach, so the on-ramp is straightforward. If you are new to Vue and want to learn how to use it in your projects, I recommend taking a course like this.

Learn the Components Model

You can assemble a Vue app using components, which reside in .vue files. Each component consists of its own template markup, CSS, and JS code. If you already distribute your CSS styles and JS code across multiple files, this may be a helpful model for you to learn.

Try building Multi-Page Apps

As I get started, the most useful Vue dependency I have installed so far has been router, which enables you to build multi-page apps. If you build using the Vue GUI, the application will recommend installing this for single-page applications.

Good luck getting started with Vue!