Vue in browser

Compile Vue single-file components in browser on the fly

Version: 1.2.5 Updated: 04/15/2018

By: MingruiZhang License: MIT

Downloads Last 30 Days: 99

Vue In Browser npm version Dependency Status

Compile and render *.vue component in browser on the fly.



Provide way to quick prototyping with vue component. No need to install any dependencies to your project.

In real projects you should use vue-loader or vueify instead


Just include the script on the page and create another inline script to call loadVueComponent(filePath, selector).

  • filePath is the path (relative or absolute) to your *.vue file
  • selector is the DOM element selector you want to render the vue component on.
<div id="app"></div>

<script src=""></script>
<script> loadVueComponent('./path/to/your/app.vue', '#app') </script>


Basic template / style/ script code blocks:

// app.vue
  .red {
    color: #f00;

  <h1 class="red">{{msg}}</h1>

export default {
  data () {
    return {
      msg: 'Hello world!'

You can import using the src attribute:

// app-with-import.vue
<style src="./path/to/your/style.css"></style>

<template src="./path/to/your/template.html"></template>

<script src="./path/to/your/script.js"></script>

Javascript support will be based on your browser, so you can write ES2015 if your browser supports, use libraries like @babel/standalone if necessary.

NOTE: importing other components from script doesn't work. However you can call multiple loadVueComponent() to achieve it.

// container.vue
  <div class="container">
    <div id="module-1"></div>
    <div id="module-2"></div>

// module-1.vue

// module-2.vue

// html
<div id="app"></div>

  loadVueComponent('./container.vue', '#app').then(() => {
    // Chain the function calls so the container component is rendered before subsequent load applies.
    loadVueComponent('./module-1.vue', '#module-1');
    loadVueComponent('./module-2.vue', '#module-2');

Scoped CSS, CSS module, mix preprocessor languages not supported yet.



Categories: Vue js