vue-reactivity / fs

Licence: MIT license
Reactive filesystem powered by @vue/reactivity

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to fs

scope
The auto effect collecting for @vue/reactivity
Stars: ✭ 61 (+35.56%)
Mutual labels:  vue3, vue-reactivity
vue-vben-admin
A modern vue admin. It is based on Vue3, vite and TypeScript. It's fast!
Stars: ✭ 12,169 (+26942.22%)
Mutual labels:  vue3
vite-primevue-starter
VUE 3 Starter project for using primevue 3 with Vite 2 - Pages, Layouts, Validation
Stars: ✭ 37 (-17.78%)
Mutual labels:  vue3
vuestic-ui
Free and Open Source UI Library for Vue 3 🤘
Stars: ✭ 1,501 (+3235.56%)
Mutual labels:  vue3
vite-svg
Use SVG files as Vue components with Vite
Stars: ✭ 98 (+117.78%)
Mutual labels:  vue3
vitesome
A simple opinionated Vue3 Starter Template with Vite.js
Stars: ✭ 124 (+175.56%)
Mutual labels:  vue3
is-directory
Extends `stats.isDirectory()`, returns `true` if a filepath is a directory.
Stars: ✭ 28 (-37.78%)
Mutual labels:  fs
vue-simple-password-meter
Vue Simple Password Meter is a simple password strength meter component written in vanilla js and extremly lightweight
Stars: ✭ 65 (+44.44%)
Mutual labels:  vue3
vue3-lazyload
A vue3.x image lazyload plugin
Stars: ✭ 65 (+44.44%)
Mutual labels:  vue3
vite2-vue3-admin
Vite2 + Vue3.0 + ant-design 2.x
Stars: ✭ 28 (-37.78%)
Mutual labels:  vue3
templates
tsParticles website templates collection
Stars: ✭ 42 (-6.67%)
Mutual labels:  vue3
admin-antd-vue
Vue3.x + Ant Design Admin template (vite/webpack)
Stars: ✭ 111 (+146.67%)
Mutual labels:  vue3
GoWebSSH
功能强大,Go 实现的一个WebSSH,支持文件上传下载
Stars: ✭ 112 (+148.89%)
Mutual labels:  vue3
sonic-client-web
🎉Front end of Sonic cloud real machine testing platform. Sonic云真机测试平台前端。
Stars: ✭ 512 (+1037.78%)
Mutual labels:  vue3
nuxt3-app
Nuxt3 (Nuxt 3) best starter repo, Tailwindcss, Sass, Headless UI, Vue, Pinia, Vite
Stars: ✭ 252 (+460%)
Mutual labels:  vue3
vue-antd-admin
基于vue3.0 + vue-cli4.0 + vue-router4.x + vuex4.x + ant-design-vue2.x开发的后台管理系统模板,包含权限路由、权限按钮、流程配置、个人中心等基础功能
Stars: ✭ 57 (+26.67%)
Mutual labels:  vue3
vue-magnify
vue-magnify / vue放大镜组件
Stars: ✭ 14 (-68.89%)
Mutual labels:  vue3
vue3-datepicker
Simple datepicker component for Vue 3
Stars: ✭ 93 (+106.67%)
Mutual labels:  vue3
tov-template
vite + vue3 + ts 开箱即用现代开发模板
Stars: ✭ 251 (+457.78%)
Mutual labels:  vue3
vue-fs
A Vue file management client, complete with a node/express/FS backend.
Stars: ✭ 40 (-11.11%)
Mutual labels:  fs

Reactive filesystem powered by @vue/reactivity

npm npm bundle size

Install

npm i @vue-reactivity/fs

Usage

Work only in Node.js

Async usage

import { useFile } from '@vue-reactivity/fs'

const fileRef = await useFile('messages.txt').waitForReady()

console.log(fileRef.value) // output file content

fileRef.value += 'Hello World' // append to file

fileRef.value = 'Good Morning' // write to file

Callback usage

import { useFile } from '@vue-reactivity/fs'

useFile('messages.txt')
  .waitForReady()
  .then(fileRef => {
    console.log(fileRef.value) // output file content
  })

Watch for file changes (via chokidar)

const fileRef = useFile('messages.txt', { watchFileChanges: true })

useJson

import { useJSON } from '@vue-reactivity/fs'

const data = useJSON('data.json', { initialValue: { foo: 'bar' }})

console.log(data.value) // { foo: 'bar' }

data.value = { bar: 'foo' } // write to json file

Custom serializer

import YAML from 'js-yaml'
import { useFileWithSerializer } from '@vue-reactivity/fs'

export function useYAML<T>(path: string, options: JSONSerializerOptions<T> = {}) {
  return useFileWithSerializer<T>(
    path,
    {
      ...options,
      serialize: v => YAML.safeDump(v)
      deserialize: v => YAML.safeLoad(v),
    },
  )
}

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].