Installing Vue+Vuex+Vuetify

This short guide will hopefully clear up how node, vue, @vue-cli, and vue plugins all work together.

Background

These are the technologies needed to get a Vue single page application (SPA) going:

• Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Think about it as the Python shell, you use the Python shell to run .py files. Node is used to run .js files
• npm is the default package manager for Node.js. Packages are bits of code that are made to solve a particular problem.
• npx Executes a command (npx <command>) either from a local node_modules/.bin, or from a central cache, installing any packages needed in order for <command> to run. <command> is typically composed of a package name and a command defined in the package, for example vue create app. The general rule is to only use npx to quickly try out packages. You shouldn’t use it to develop an app since it uses whatever package version is active at the moment and this can make tracking dependency errors more difficult when doing long term development.
• vue is a package containing all the code needed to build user interfaces using the vue framework.
• @vue/cli is a package used to quickly scaffold vue SPAs. It includes vue and command line programs (tooling) to build setups for a modern frontend workflow. It also includes capabilities to run a hot-reload development server, to lint-on-save, and to make production-ready builds.
• vue plugins usually add global-level functionality to Vue. In our case we are focusing on vuex (for state management) and vuetify (UI framework).
• locally vs globally installed JavaScript packages are two ways to install packages. Following the general rule that it is better to install packages locally, we assume a local installation for all packages. Vue’s documentation covers the global installation alternative.

Creating your application using locally installed packages (Windows)

• Create a folder for your application, mkdir App.

• Move into App and install vue

  • Option 1: If you are a novice (like me) and want to start a brand new SPA, install the CLI since it includes vue plus extra tooling to quickly scaffold most of your project, npm install @vue/cli
  • Option 2: If you are an advanced user and want to use vue in your existing application, use npm install vue. But if you were, you wouldn’t be reading this since you already have an SPA and you just want to install vue and not all the included tooling in @vue/cli.

• Notice that node_modules was created in App. At this point, it contains the @vue/cli package and all its required packages.

• Inside App, create a vue application using the command node node_modules\@vue\cli\bin\vue create appvue. Note that in this step we are using node to run the vue.js file in node_modules\@vue\cli\bin\ with create as the command and appvue as the argument. You can actually see the code inside of vue.js to see how the CLI is setup. Also note that the path to vue.js is relative since you are inside App. Finally, when installing appvue, make sure to include vuex in the optional plugins to install.

• Notice that appvue was created in App. Inside appvue are all the directories (scaffolding) needed for appvue.

• Move into appvue and install the vuetify plugin using the command node absolutepathto\App\node_modules\@vue\cli\bin\vue add vuetify. I specified the absolute path to vue.js (the same vue.js we used to create appvue) but I guess you can also use a relative path. Notice that vuetify was added to node_modules in appvue.

You now have a working Vue+vuex+vuetify SPA ready to go!