vite-plugin-vue-server-ref

import { defineConfig } from 'vite'; import ServerRef from 'vite-plugin-vue-server-ref'; import Vue from '@vitejs/plugin-vue'; // vite.config.ts export default defineConfig({ plugins: [ Vue(), ServerRef({ state: { foo: 'bar', object: { count: 0, message: 'Hello' } } }) ] }); // src/main.ts (or a Vue component) import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app'); // src/App.vue <script setup lang="ts"> import { ref } from 'vue'; import type { ServerReactive, ServerRef } from 'vite-plugin-vue-server-ref/client'; const foo = (await import('server-ref:foo')).default as ServerRef<string>; const object = (await import('server-reactive:object?diff')).default as ServerReactive<{ count: number; message: string }>; console.log('Initial foo:', foo.value); // Should log 'bar' console.log('Initial object:', object.count); // Should log 0 foo.value = 'updated string'; object.count++; object.message = 'World'; // You can also listen for changes from the server/other clients foo.$onSet((newValue) => { console.log(`Foo changed from server/client: ${newValue}`); }); // Example of controlling sync direction // foo.$syncUp = false; // Makes it download-only // object.$syncDown = false; // Makes it upload-only const localCount = ref(0); setInterval(() => { localCount.value++; // This won't sync to server unless foo.$syncUp is true and value is changed // console.log('Local count:', localCount.value); }, 1000); </script> <template> <div> <h1>Server Ref Demo</h1> <p>Foo: {{ foo.value }}</p> <p>Object Count: {{ object.count }}</p> <p>Object Message: {{ object.message }}</p> <p>Local Count: {{ localCount }}</p> </div> </template>