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: 2 months 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 6 years ago)
- Default Branch: archive
- Last Pushed: 2020-04-21T04:40:34.000Z (over 5 years ago)
- Last Synced: 2024-10-30T00:55:16.484Z (about 1 year ago)
- Language: TypeScript
- Size: 186 KB
- Stars: 574
- Watchers: 16
- Forks: 38
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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