Browser Vue Loader is a single file JavaScript library that loads untranspile Vue applications into the browsers.
This loader is ideal for rapid prototyping. With the loader, you don't have to configure built tools, but rather write the application code and run them in the browser.
In many ways, this loader behaves very similar to the vue-loader for Webpack. The major difference is that this loader does not access the local file system and requires no build steps.
We prefer convention over configuration in this loader. You can load Vue's single-file component, ES module, NPM packages, SASS styles and even images directly!
Include the loader and write your script within a <script type="boom!">.
<scriptsrc="https://unpkg.com/browser-vue-loader"></script><scripttype="boom!">importVuefrom'vue';importAppfrom'./path-to-your/App.vue';newVue({render: h=>h(App)}).$mount('#app')</script>Include Vue and the loader into your HTML file.
And you can load Vue modules by the loadVue function. The loaded module
will be returned as a promise.
<divid="app"></div><scriptsrc="https://unpkg.com/vue"></script><scriptsrc="https://unpkg.com/browser-vue-loader"></script><script>loadVue('./App.vue').then(App=>{newVue({render: h=>h(App)}).$mount('#app')})</script>The loadVue method can load Vue single-file components. The method takes only
one argument, which is the URL of the file to be fetched from.
The URL must be either relative or full, such as ./App.vue or http://example.com/path/to/App.vue.
In the following example, we load the ./single-file-app.vue component by loadVue('./single-file-app.vue').
The loadVue method will return a Promise of the component.
When the promise is resolved, we can create the Vue app by mounting it to a DOM element.
loadVue('./single-file-app.vue').then(App=>{newVue({render: h=>h(App)}).$mount('#app')})Beside Vue single-file components, the loader can actually load any ES module to the web page.
In the following example, a ES component is loaded by loadVue('./sample-es-module').
In the <script type="boom!"> or your source code, you can also use the import statement
to load another module. Just as what you would do normally with webpack and babel configured.
importAppfrom'./App.vue';The loader's module system is based on the WhatWG loader specification, which describes the behavior of loading JavaScript modules from a JavaScript host environment.
A more complete example of a Vue application is the TODO MVC, which
contains of two components App.vue and Todos.vue.
The loader can directly load a CommonJS or AMD module from NPM registry, if the name of the module cannot be resolved to a valid URL.
For example, by writing
importVuefrom'vue';The loader will realise that the string vue is not a valid URL, so
it will search for the package use the unpkg.com
CDN. The actual URL of the module will be resolved to
https://unpkg.com/vue@2.5.16/dist/vue.js.
By default, the loader will process the module as a CommonJS module.
You can specify the process by adding the prefix <processor>! to the
module name.
For example, the following 2 import statements are working.
importVuefrom'commonjs!vue';// Treat the module as a CommonJS moduleimport_from'amd!lodash';// Treat the module as an AMD moduleVuex is a aentralized state management library for Vue. You can use Vuex in your project with this loader.
importVuefrom'vue'importVuexfrom'vuex'import{state,mutations}from'./mutations'importpluginsfrom'./plugins'Vue.use(Vuex)exportdefaultnewVuex.Store({
state,
mutations,
plugins
})You can write Vue's functional component in a .vue file. All you need is to
mark the <template> to be functional, as the example below.
<templatefunctional><div><h1class="inside">Hello from {{ props.location }}!</h1></div></template>Sometimes you may wish to write a render function instead of a template. JSX allows you to write something similar to HTML tags inside JavaScript.
<script>importHelloComponentfrom'./hello-component.vue'exportdefault{data(){return{msg: 'Hello!'}},render: function(h){return(<div><h1class="outside">{this.msg}</h1><HelloComponentlocation="the other side"/></div>)}}</script>Scoped CSS is supported in single-file components.
<stylescoped>
.example {
color: red;
}
</style><template><divclass="example">hi</div></template>Note: the second line in this example is created by the child component with a scoped CSS style setting the color to blue.
Feel free to use SASS in the single-file component. CSS processors are already configured for you.
<stylelang="scss">
$purple-color: rgb(128, 0, 128);
.purple {
color: $purple-color;
}
</style>You can use @import in the CSS or SASS code.
The loader will convert them into a special ES module and add to the registry. Same file will not be downloaded twice.
In the single-file component:
<stylelang="scss">@import"sample-scss";
.pink {
color: $pink-color;
}
</style>In sample-scss.scss
$pink-color: rgb(255, 192, 203)Modularize your CSS by CSS Modules. They are supported!
For example, the .banana style below can be accessed by this.$style.banana.
<stylemodule>
.banana {
color: yellow;
}
</style>And the .orange style below can be accessed by this.namedModule.orange.
<stylemodule="namedModule">
.orange {
color: orange;
}
</style>A web page is not complete without images. You can import images as if an ES module, and use them like a URL.
The image will be fetched and converted to base64 data URL automatically.
<template><divclass="app"><imgclass="image-1" :src="pngImage" /><imgclass="image-2" :src="svgImage" /></div></template><script>importpngImagefrom"./logo.png"importsvgImagefrom"./logo.svg"exportdefault{data(){return{pngImage, svgImage}}}</script>Want to contribute to this loader? That's great!
We recommend you to use yarn
to manage the dependencies. However, you can certainly use npm instead.
After cloning the repository, use yarn command to install the dependencies.
Other commands and their descriptions are below.
| Command | Description |
|---|---|
yarn | Install the dependencies. |
yarn dev | Run the webpack dev server. |
yarn build | Build the library. |
yarn test | Run the test cases with karma. |
yarn start-test | Start karma test runner. |
yarn run-test --grep="Test Name" | Run single test. |
Note: we chose to commit dist directory to git for convenience.
There is so far no issue for it. However we might consider ignoring it
from our git repository if it grows too big one day.
The cat in our banner is from the openclipart.org.