Vue: Installing Standalone version via npm

[santi6291]

Vue.js version

2.0.2

The instructions to install Vue standalone version via NPM are not clear. It doesn't seem to be possible. I think it should be possible or clear how to install Vue standalone version via NPM specailly with the rise in popularity of installing Front end dependecies via NPM

[fnlctrl]

https://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build

Edit: for anyone who simply couldn't or just don't bother to click the link and read the docs:

[michaelenger]

@santi6291 You should be able to get to the standalone version by using the path that's being aliased in Webpack/browserify:

const Vue = require('vue/dist/vue.common');

[jasonszhao]

@michaelenger Your method works for me, but I believe that it is discouraged.

Do NOT do import Vue from 'vue/dist/vue.js' - since some tools or 3rd party libraries may import vue as well, this may cause the app to load both the runtime and standalone builds at the same time and lead to errors.

@fnlctrl I believe this issue should be reopened. Either the documentation is unclear or there just isn't an official way of importing the standalone build of Vue without a build tool.

[fnlctrl]

there just isn't an official way of importing the standalone build of Vue without a build tool.

How do you import anything without a build tool? There's currently no implementation of ES6 modules in browser.

[jasonszhao]

Well there are similar import functions that come with libraries. I'm using Electron, and the renderer process has access to the node require() function.

I'm currently doing this right now, which seems to work:

const Vue = require('vue/dist/vue.common.js');

[santi6291]

@fnlctrl Not everyone is an expert with Javascript compilers and at this day in time that includes packages for server side and client side. What is the complication with been more descriptive on documentation or adding some links pointing developers in the right direction?

Vue is a great library and very popular there is bound to be beginner to advance developers using it

[fnlctrl]

@jasonszhao Well, since you're not using any build tools it's perfectly fine to just require('vue/dist/vue.common.js'). The warning in the docs are meant for usage with build tools.

@santi6291 If you find the docs to be hard to understand, please tell us which paragraph or sentence you think that needs to be improved. If you have questions, use the forums or gitter or stackoverflow. Something like the instructions are not clear isn't going to help anyone.
I also believe the link to the docs I posted above have already answered your original question of Installing Standalone version via npm. Vue doesn't require you to be an advanced developer, it just needs you to read the docs carefully - like any other lib.

[bmarkovic]

@fnlctrl Well, frankly, the doc is far from clear about importing the full version if one is not using Webpack or Browserify. For example I am currently toying with a scaffold that uses Gulp and Babel, and it works fine with most NPM modules. Importing Vue from 'vue' gets just the runtime-only version. To get the full one, requires importing as:

import Vue from 'vue/dist/vue'

Which is documented at ... well it's not quite documented really. Sure, if you know what they are, it's pretty much the purpose of UMD modules to "just work" in these unimaginable scenarios. Still took me several re-reads of the Installation page and landing on this issue to figure it out. While for production uses I too use the Webpack CLI tool, It'd be great if users were pointed to a way of using Vue in such scenarios more directly.

Given the structure of the Installation page in the documentation it's not that easy to say "this is the paragraph that needs change". But the section on full and runtime versions is the most likely candidate where one should insert a paragraph about what if you're using Gulp or Brunch and how to import Vue with your own Babel config if using some other scaffold.

Finally, with Chrome 61 there actually is now a full browser implementation of ES6 which should also be considered.

[yyx990803]

FYI: a bundler alias, if possible, should always be preferred instead of directly importing a file path, because there are other dependencies that may do import Vue from 'vue' - by not using the alias you risk having multiple copies of Vue loaded at the same time.

Personally, I think the build explanations provides enough information for users to determine the correct build to use depending on scenarios. I'm honestly not sure what is missing. Note that it is out of scope for Vue docs to explain how ES modules or your choice of bundlers work; nor can we cover every possible case in which Vue can potentially be used - we will focus on recommended tooling, and suggest users without enough tooling experience to follow the recommended setups.