Three ways to include Vue in your projects

There are multiple ways of using VueJS - which should you use?

VueJS is flexible and powerful - not a combination that you often see together. You can initiate and use Vue in more than one way in your app.

Use in package with a build cycle

This should be your preferred way of using Vue.

First install Vue CLI globally -

1

npm i -g @vue/cli

The above command will install Vue CLI globally in your computer (in Windows - it is in C:\Users\<user>\AppData\Roaming\npm\).

Next, use CLI to create a new Vue project.

1

vue create myAwesomeApp

Vue CLI will ask a bunch of questions that you need to answer in order to scaffold a starter app. You can choose various options to -

select Babel for usage in build pipeline
include Vuex store and Vue router
specify whether Vue out-of-the-box PWA starter needs to be included
include ESLint
and more..

Once complete, you can start your app using the helpful commands that Vue CLI has created for you in your package.json.

1

npm run serve dev

You can get the same benefits of Vue CLI without installing CLI locally - just use NPX.

1

npx @vue/cli create anotherAwesomeApp

This has the same end result as before.

Vue CLI also has an UI option.

1

vue ui

This opens up a browser with a full-blown UI that front-ends Vue CLI. Some of you may find it easier to use.

Using Vue CLI will have some kind of build step integrated (for e.g. using web pack).

NPM or Yarn

If you do not like Vue CLI for some strange reason, you can directly use NPM or YARN to install Vue directly and configure yourself.

You would have to not only install vue but also stitch together various dependencies and setup a build cycle.

Typically, you would want to use this after using a starter template. A starter template/boilerplate provides a good way to start using a combination of your favourite technologies that someone else has kindly shared on a public repository.

For e.g.,

Using NPM or Yarn will need a build step to be integrated using Webpack or equivalent.

CDN

You can use a publicly available or your own CDN to consume a minified VueJS script directly over the wire.

Your script will reference the external VueJS Javascript file - same as any other external JS file
You will use Vue functions as usual

1
2
3
4


<!-- index.html -->
<script src="https://unpkg.com/vue"></script>

<!-- lot of code -->

This is simple solution and does not need you to do many many steps before using Vue. Also, this may prove handy if you use selectively in a very large app with multiple functions that do not have anything to do with Vue. You can incrementally try out Vue in a few pages before committing to a more complex arrangement.

Using CDN is not preferred in projects that scale.

Single file components (SFCs) cannot be used when you use CDN. You would want SFCs to modularise your code, structure code and also provide features like scoped CSS.
If you use browsers that do not support functions / methods used in Vue, you need polyfill and a build step. Using Vue from CDN will not help
Each CDN lookup will mean an additional server request - this is likely to serve content faster than your own server if you use popular CDNs, but an additional lookup nevertheless. Having tens of CDNs is not ideal.

Which to use?

Minimal setup in a small part of large application; cannot commit to Vue right now - use Vue from CDN.

Medium to large projects - use Vue CLI.

Need custom setup and you could locate a template that provides you a head start - use boilerplate + NPM/Yarn.