antfu/vite-fs

Reactive FileSystem for Vite accessible in client-side

Vite FS

{WIP} Reactive FileSystem for Vite accessible in client-side.

Usage

Suffix .ref to path you'd like to import, for example

import data from '../data.json.ref'
// the type of `data` will be `Ref<any>`
// `data` will bind to `data.json` magically on dev

data.value.x = 10
// `data.json` will be updated

Changes of the file will reflect to the ref as well.

When importing .json files, it will do the parse/stringify automatically. When importing with other file formats, a plain Ref<string> with UTF-8 encoding will be returned.

Install

npm i -D vite-fs

// vite.config.js
import Vue from '@vitejs/plugin-vue'
import ViteFS from 'vite-fs'

export default {
  plugins: [
    Vue(),
    ViteFS()
  ]
}

// shim-fs.d.ts
import { ref } from 'vue'

declare module '*.json.ref' {
  const content: Ref<any>
  export default content
}

declare module '*.ref' {
  const content: Ref<string>
  export default content
}

Sponsors

This project is part of my Sponsor Program

License

MIT License © 2021 Anthony Fu