vuejs / vue-dev-server

A POC dev server that allows you to import `*.vue` files via native ES modules imports.

@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

vue-dev-server's Issues

Will this project continue to progress?

Will this project continue to progress?

If so, I'll be glad to help.
I think helping the community to serve untranspiled ES6 code is an important goal.

Roadmap

1. refactor the current codebase a bit:

   • Split the logic for compiling vue files and transforming node module imports into their own files

   • Move the binary into its own file and make the main exports just the middleware

2. Clarify what should be added next

   • A plugin system for pre-processors. e.g. for TypeScript, it should ideally be a separate package so that users don't have to download TypeScript even when not using it. (This also means we should probably restructure the project to use a monorepo setup)

   • Caching. Probably simply based on the last modified time of a file being served, backed by an LRU cache.

   • Relative static asset handling, e.g. <img src="./foo.png">. We need a different template compiler module from this one to transform relative asset URLs based on the filesystem and the request path.

Contribution welcome!

Release to npm

We should release it so users can use our CLI and API easily

Add docs

Since we've got middleware export, we should also have docs for it.

Export middleware

I think it'll be nice to have ability to use this awesome functionality in any Express app. I'd like to work on it