https://github.com/vuejs/vue-dev-server

A POC dev server that allows you to import `*.vue` files via native ES modules imports.
https://github.com/vuejs/vue-dev-server

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/vuejs/vue-dev-server
• Owner: vuejs
• License: mit
• Archived: true
• Created: 2019-03-03T05:53:52.000Z (over 5 years ago)
• Default Branch: archive
• Last Pushed: 2020-04-21T04:40:34.000Z (over 4 years ago)
• Last Synced: 2024-04-13T21:44:24.731Z (7 months ago)
• Language: TypeScript
• Size: 186 KB
• Stars: 573
• Watchers: 16
• Forks: 36
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - vuejs/vue-dev-server - A POC dev server that allows you to import `*.vue` files via native ES modules imports. (TypeScript)

README

        
# @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`:

``` html



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

```

In `App.vue`:

``` vue

  
{{ msg }}


export default {

  data() {

    return {

      msg: 'Hi from the Vue file!'

    }

  }

}

div {

  color: red;

}

```

Then:

``` bash

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

- [x] Caching

- [ ] NPM module imports

- [ ] Pre-processors