Getting started with VueJs.

Getting started with VueJs.

VueJs is a Javascript front-end framework used to create a dynamic, data driven websites and user Interfaces. It can also be used to create stand-alone widgets like search bar, card layouts, sign-up form etc.

Vue can be used to create a whole website with multiple pages and components. These websites are mostly called Single Page Applications.

Single Page Applications (SPA) are websites that initially sends only a single HTML page to the browser. Vue intercepts subsequent request and handles page changes in the browser by changing which components shows on the page, which results to faster and smoother websites. All routing is done in the browser and not on the server.

These SPAs run on the the client side, but can be used to create full-stack applications by making HTTP requests to a server.

Vue can also run on the server-side by using a Server Side Rendering (SSR) framework such as NuxtJS. SSR enables an application to display web-page on the server instead of rendering it in the browser.

The need for a framework

Unlike the traditional web apps, where you click on a link and wait for a new page to load, you submit a button/form and wait for actions to complete; Mobile apps and desktop apps built with JavaScript and its frameworks feel very "reactive". Things happen instantly, you don't have to wait for new pages to load or actions to start. Users tend to have a smoother experience.

Installation

  • Import it as a cdn package on your html page using a script tag
<script src="https://unpkg.com/vue@next"></script>
  • The most common way of installing VueJS is with npm. This is mostly used with large applications. To get started with npm, you have to download nodeJS.

    Click here to install NodeJS

To ensure you have node installed, go to your Command Line Interface (CLI) (or terminal), type npm -v.

This should be bring up a version of the node you downloaded. You get something like v12.18.1.

Next is to install the Vue CLI, still in your terminal, type npm install -g @vue/cli.

Same way you checked if node was installed, also run vue --version.

End Note

If you're here, I believe this article has given you a great introduction to Vuejs and I hope this marks the beginning of your journey with Vuejs...

Visit The VueJs Docs for more clarifications, if you need any...