❤
npm
Sign UpSign In

vue-in-browser

1.2.5 • Public • Published

Vue In Browser npm version Dependency Status

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

Readme

Keywords

Package Sidebar

Install

npm i vue-in-browser

Repository

github.com/MingruiZhang/vue-in-browser

Homepage

github.com/MingruiZhang/vue-in-browser#readme

Weekly Downloads

2

Version

1.2.5

License

MIT

Unpacked Size

819 kB

Total Files

23

Last publish

Collaborators

  • mingruizhang
Try on RunKit
Report malware