Skip to content
A POC dev server that allows you to import `*.vue` files via native ES modules imports.
Branch: master
Clone or download
Latest commit ab34bf3 Mar 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin feat: add cache support (#9) Mar 8, 2019
test cleanup Mar 3, 2019
.gitignore init Mar 3, 2019
LICENSE
README.md
loadPkg.js
middleware.js feat: add source maps (#6) Mar 9, 2019
package.json feat: add cache support (#9) Mar 8, 2019
readSource.js feat: add cache support (#9) Mar 8, 2019
transformModuleImports.js refactor: split files (#8) Mar 4, 2019
yarn.lock

README.md

@vue/dev-server

This is a proof of concept.

Imagine you can import Vue single-file components natively in your browser... without a build step.

In an directory, create an index.html:

<div id="app"></div>
<script type="module">
import Vue from 'https://unpkg.com/vue/dist/vue.esm.browser.js'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')
</script>

In App.vue:

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hi from the Vue file!'
    }
  }
}
</script>

<style scoped>
div {
  color: red;
}
</style>

Then:

npm i @vue/dev-server
npx vue-dev-server

How It Works

  • Imports are requested by the browser as native ES module imports - there's no bundling.

  • The server intercepts requests to *.vue files, compiles them on the fly, and sends them back as JavaScript.

  • For libraries that provide ES modules builds that work in browsers, just directly import them from a CDN.

  • Imports to npm packages inside .js files (package name only) are re-written on the fly to point to locally installed files. Currently, only vue is supported as a special case. Other packages will likely need to be transformed to be exposed as a native browser-targeting ES module.

TODOs

  • Caching
  • NPM module imports
  • Pre-processors
You can’t perform that action at this time.