Vue-Vanilla is a vue-loader full featured library that allows single file components without additional tools.
Features
- Lazy (or eager) loading
- Functional components
- Require dependent JS or CSS
- Custom template/script/css transformers that allow CSS vars
Using Vue Vanilla is simple. There is no requirejs, amd, commonjs requirement. No babbel, webpack, webpack2, browserify, or nodejs. It's just vanilla JavaScript.
Download the library, load it via a script tag, and get going!
This library currently is not served on any CDN's (see https://github.com/cdnjs/cdnjs/blob/master/CONTRIBUTING.md#b-request-a-new-library) But that won't stop you from downloading the library and dropping it into your project!
It is required to have a browser or polyfill for the Promises and fetch apis. As far as browser compatibilities go, ie9+ requires the fetch and promise polyfill:
By default, all resources are split up into two categories: lib and vue.
Vue resources come from $basePath/vue/component-name.vue.html.
Lib resources come from $basePath/vendor/library-path.
However, you can specify other locations for your component if you want to be more organized or if your component has a conflicting js object name:
Designing components is intended to be easy. All that's needed is a file with a script and a template.
The script must define a window-level javascript name of the component.
Sometimes, when you load a component, you need to be sure that you have all of the required libraries and css scripts loaded.
By wrapping your component definition in an object with a require and then property, your component will try to load the scripts and styles first.
Styles will not be loaded by the importer twice.
If the key of the script, 'jQuery' in this case, is present, then it will not attempt to load it.
If you are worried about version conflicts, then this library's opinion is that you are already dealing with too much dependency sprawl and should reduce your JavaScript usage.
Often, you want to show a loading screen while the components are being remotely loaded. To do this, you can add a listener to the importVueComponent:
Whenever the importVueComponent registers a component, it immediately tries to load it. This can be undesirable for large projects, or large routed applications, as it unnecessarily grabs resources and takes time. To turn this off, you can set the importVueComponent.lazy flag to false:
However, when doing so, it is recommended to track the loading state of the importer to tell when child components might be ready:
When using importVueComponent, you can specify to load some things lazily, the stub in place will either be the Component (when it's loaded) or a callback function: