https://github.com/arikw/vite-plugin-vue-static-sfc

Serve ".vue" files as static assets
https://github.com/arikw/vite-plugin-vue-static-sfc

vite vite-plugin vue

Last synced: about 2 months ago
JSON representation

Serve ".vue" files as static assets

• Host: GitHub
• URL: https://github.com/arikw/vite-plugin-vue-static-sfc
• Owner: arikw
• License: mit
• Created: 2022-07-06T21:07:52.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2022-07-07T06:46:46.000Z (about 2 years ago)
• Last Synced: 2024-06-16T05:32:13.207Z (3 months ago)
• Topics: vite, vite-plugin, vue
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/vite-plugin-vue-static-sfc
• Size: 13.7 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-vite - v23 - Serve ".vue" files as static assets. (Plugins / Vue)
• awesome-vite - v23 - Serve ".vue" files as static assets. (Plugins / Vue)

README

        
# Vue Static SFC Plugin for Vite

Serve `.vue` files as static assets

# Installation

```sh

npm install vite-plugin-vue-static-sfc

```

# Usage

```js

// vite.config.js

import staticVuePlugin from 'vite-plugin-vue-static-sfc';

// require('vite-plugin-vue-static-sfc') is also supported

export default {

  plugins: [

    staticVuePlugin()

  ]

};

```

# Why

I've created a static website ([a typing game for kids](https://github.com/arikw/kids-keyboard-game)) that avoids build tools and uses [vue3-sfc-loader](https://www.npmjs.com/package/vue3-sfc-loader) to process `.vue` files dynamically at runtime.

While developing, I wanted to use [Vite](https://www.npmjs.com/package/vite) as an http server to serve the website and leverage its hot reloading, but it tried to process `.vue` files and requested to install a dedicated plugin to do so.

I just wanted Vite to serve the `.vue` files as if they were simple text files.

With this plugin, Vite will do that.

# Notice

* The HMR will reload the entire webpage if a change in a `.vue` file is detected