vue-in-browser v1.2.5

Vue In Browser

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

Download

https://unpkg.com/vue-in-browser@1.2.5/dist/bundle.min.js

Why?

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

Usage

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="https://unpkg.com/vue-in-browser@1.2.5/dist/bundle.min.js"></script>
<script> loadVueComponent('./path/to/your/app.vue', '#app') </script>

Support

Basic template / style/ script code blocks:

// app.vue
<style>
  .red {
    color: #f00;
  }
</style>

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

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

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
<template>
  <div class="container">
    <div id="module-1"></div>
    <div id="module-2"></div>
  </div>
</template>

// module-1.vue
...

// module-2.vue
...

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

<script>
  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');
  })
</script>

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

License

MIT