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
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
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


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 ''
import App from './App.vue'

new Vue({
  render: h => h(App)

In App.vue:

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

export default {
  data() {
    return {
      msg: 'Hi from the Vue file!'

<style scoped>
div {
  color: red;


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.


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