Skip to content
This repository has been archived by the owner on Jun 29, 2021. It is now read-only.

Loads a .vue file from the given URL and compiles it to a component directly in the browser.

License

Notifications You must be signed in to change notification settings

SeregPie/VueInBrowserLoader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

VueInBrowserLoader

Inspired by Franck Freiburger's http-vue-loader.


VueInBrowserLoader(url)

Loads a .vue file from the given URL and compiles it to a component directly in the browser. Already loaded components are cached.

dependencies

setup

npm

npm install vueinbrowserloader

ES module

import VueInBrowserLoader from 'vueinbrowserloader';

browser

<script src="https://unpkg.com/vueinbrowserloader"></script>

usage

new Vue({
  components: {
    'MyButton': VueInBrowserLoader('/app/components/Button.vue'),

    'MyDialog': VueInBrowserLoader('/app/components/Dialog'),
     // resolves to '/app/components/Dialog/index.vue'
  },
  /*...*/
});

Use relative URLs.

<!-- /app/components/Dialog/index.vue -->
<template><!--...--></template>
<script>

module.exports = {
  components: {
    'MyTitleBar': VueInBrowserLoader('./TitleBar.vue'),
    // resolves to '/app/components/Dialog/TitleBar.vue'

    'MyButton': VueInBrowserLoader('../Button.vue'),
    // resolves to '/app/components/Button.vue'
  },
  /*...*/
});

</script>

Separate files.

<template src="./template.html"></template>
<script src="./script.js"></script>
<style src="./style.layout.css"></style>
<style src="./style.theme.GreenForest.css"></style>

todo

  • scoped style
  • pre-processors
  • post-processors

About

Loads a .vue file from the given URL and compiles it to a component directly in the browser.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published