@powersync/nuxt 0.0.0-dev-20260128023420 → 0.0.1

package/{README → README.md}

@@ -23,23 +23,25 @@ PowerSync Nuxt module integrated with the [Nuxt Devtools](https://github.com/nux
 
 ## Installation
 
-This module exposes all `@powersync/vue` composables, so you only need to install `@powersync/nuxt`:
+This module re-exports all `@powersync/vue` composables. With **npm** (v7+), installing `@powersync/nuxt` is enough; with **pnpm**, install peer dependencies explicitly.
 
 ```bash
-# Using pnpm
-pnpm add -D @powersync/nuxt vite-plugin-top-level-await vite-plugin-wasm
-
-# Using yarn
-yarn add --dev @powersync/nuxt vite-plugin-top-level-await vite-plugin-wasm
-
 # Using npm
-npm install --save-dev @powersync/nuxt vite-plugin-top-level-await vite-plugin-wasm
+npm install @powersync/nuxt
+npm install --save-dev vite-plugin-top-level-await vite-plugin-wasm
+
+# Using pnpm (peer deps are not auto-installed)
+pnpm add @powersync/nuxt @powersync/vue @powersync/web
+pnpm add -D vite-plugin-top-level-await vite-plugin-wasm
 ```
+
 > [!NOTE]
 > This module works with `Nuxt 4` and should work with `Nuxt 3` but has not been tested. Support for Nuxt 2 is not guaranteed or planned.
 
 ## Quick Start
 
+For a complete working app, see the [Nuxt + Supabase Todo List demo](https://github.com/powersync-ja/powersync-js/tree/main/demos/nuxt-supabase-todolist). To set up from scratch:
+
 1. Add `@powersync/nuxt` to the `modules` section of `nuxt.config.ts`:
 
 ```typescript
@@ -207,7 +209,35 @@ export default defineNuxtPlugin({
 
 ### Kysely ORM (Optional)
 
-You can use Kysely as your ORM to interact with the database. The module provides a `usePowerSyncKysely()` composable:
+You can use Kysely as your ORM to interact with the database. The module optionally provides a `usePowerSyncKysely()` composable. To keep the bundle small, you must install the driver yourself and enable it in config.
+
+Install the driver:
+
+```
+pnpm add @powersync/kysely-driver
+```
+In your existing `nuxt.config.ts`, set:
+
+```typescript
+export default defineNuxtConfig({
+  modules: ['@powersync/nuxt'],
+  powersync: {
+    kysely: true // <- opt-in
+  },
+  vite: {
+    optimizeDeps: {
+      exclude: ['@journeyapps/wa-sqlite', '@powersync/web'],
+      include: ['@powersync/web > js-logger'],
+    },
+    worker: {
+      format: 'es',
+      plugins: () => [wasm()],
+    },
+  },
+})
+```
+
+When enabled, the module exposes `usePowerSyncKysely`. Use your schema’s `Database` type to get proper typings:
 
 ```typescript
 import { usePowerSyncKysely } from '@powersync/nuxt'
@@ -256,8 +286,8 @@ When `useDiagnostics: true` is set, `NuxtPowerSyncDatabase` automatically:
 
 Once diagnostics are enabled, you can access the [PowerSync Inspector](#powersync-inspector):
 
+- **Via Nuxt Devtools**: Open Devtools and look for the PowerSync tab
 - **Direct URL**: `http://localhost:3000/__powersync-inspector`
-- **Via Nuxt Devtools**: Open Devtools and look for the PowerSync tab (Instable until proper multitab support for diagnostics in implemented)
 
 
 
@@ -265,6 +295,10 @@ Once diagnostics are enabled, you can access the [PowerSync Inspector](#powersyn
 
 PowerSync Inspector is a tool that helps inspect and diagnose the state of your PowerSync client directly from your app in real-time.
 
+<div align="center">
+  <img src="./img/inspector.png" alt="PowerSync Logo" />
+</div>
+
 ### Setup
 
 To setup the PowerSync inspector, you need to follow the steps in the [Enabling Diagnostics](#enabling-diagnostics) section.
@@ -297,34 +331,16 @@ Real-time logging of PowerSync operations with syntax highlighting and search fu
 
 The inspector is also available in the Nuxt Devtools as a tab, providing seamless integration with your development workflow.
 
-> [!WARNING]  
-> Multitab support is still not fully supported when diagnostics are enabled which causes the inspector to malfunction in the devtool. see [Known Issues section](#known-issues)
-
 ## Known Issues
 
-1. Enabling diagnostics makes your app glitch when operating in a multi-tab environment. You can observe this issue when you open the inspector in the devtools, for example.
-
-2. PowerSync Inspector relies on `unocss` as a transitive dependency. It might clash with your existing setup, for example if you use Tailwind CSS.
+1. PowerSync Inspector relies on `unocss` as a transitive dependency. It might clash with your existing setup, for example if you use Tailwind CSS.
 
 To fix this, you can add the following to your `nuxt.config.ts`:
 
 ```typescript
 export default defineNuxtConfig({
   unocss: {
-    icons: true,
-    blocklist: [/\$\{.*\}/],
-    content: {
-      pipeline: {
-        exclude: [
-          './layouts/*/**',
-          './pages/*/**',
-          './components/*/**',
-          './composables/*/**',
-          './utils/*/**',
-          './types/*/**',
-        ],
-      },
-    },
+    autoImport: false
   },
 })
 ```

package/dist/module.d.mts

@@ -1,4 +1,4 @@
-import * as _nuxt_schema from '@nuxt/schema';
+import * as nuxt_schema from 'nuxt/schema';
 
 /**
  * Configuration options for the PowerSync Nuxt module.
@@ -33,7 +33,7 @@ interface PowerSyncNuxtModuleOptions {
      */
     kysely?: boolean;
 }
-declare const _default: _nuxt_schema.NuxtModule<PowerSyncNuxtModuleOptions, PowerSyncNuxtModuleOptions, false>;
+declare const _default: nuxt_schema.NuxtModule<PowerSyncNuxtModuleOptions, PowerSyncNuxtModuleOptions, false>;
 
 export { _default as default };
 export type { PowerSyncNuxtModuleOptions };

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "powersync-nuxt",
   "configKey": "powersync",
-  "version": "0.1.0",
+  "version": "0.0.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
-    "unbuild": "3.6.1"
+    "unbuild": "unknown"
   }
 }

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, findPath, installModule, addPlugin, addImports, addComponentsDir, addLayout, extendPages } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, findPath, addPlugin, addImports, addComponentsDir, addLayout, extendPages } from '@nuxt/kit';
 import { defu } from 'defu';
 import { addImportsFrom } from '../dist/runtime/utils/addImportsFrom.js';
 
@@ -34,6 +34,10 @@ const module$1 = defineNuxtModule({
     useDiagnostics: false,
     kysely: false
   },
+  moduleDependencies: {
+    "@nuxt/devtools-ui-kit": {},
+    "@vueuse/nuxt": {}
+  },
   async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
     nuxt.options.runtimeConfig.public.powerSyncModuleOptions = defu(
@@ -51,14 +55,10 @@ const module$1 = defineNuxtModule({
         );
       }
     }
-    await installModule("@nuxt/devtools-ui-kit");
-    await installModule("@vueuse/nuxt");
     addPlugin(resolver.resolve("./runtime/plugin.client"));
     addImports({
       name: "NuxtPowerSyncDatabase",
-      from: resolver.resolve(
-        "./runtime/utils/NuxtPowerSyncDatabase"
-      )
+      from: resolver.resolve("./runtime/utils/NuxtPowerSyncDatabase")
     });
     addImports({
       name: "usePowerSyncInspector",
@@ -66,9 +66,7 @@ const module$1 = defineNuxtModule({
     });
     addImports({
       name: "usePowerSyncInspectorDiagnostics",
-      from: resolver.resolve(
-        "./runtime/composables/usePowerSyncInspectorDiagnostics"
-      )
+      from: resolver.resolve("./runtime/composables/usePowerSyncInspectorDiagnostics")
     });
     if (options.kysely) {
       addImports({
@@ -83,10 +81,7 @@ const module$1 = defineNuxtModule({
     addComponentsDir({
       path: resolver.resolve("runtime/components")
     });
-    addLayout(
-      resolver.resolve("./runtime/layouts/powersync-inspector-layout.vue"),
-      "powersync-inspector-layout"
-    );
+    addLayout(resolver.resolve("./runtime/layouts/powersync-inspector-layout.vue"), "powersync-inspector-layout");
     extendPages((pages) => {
       pages.push({
         path: "/__powersync-inspector",
@@ -95,17 +90,20 @@ const module$1 = defineNuxtModule({
         name: "Powersync Inspector"
       });
     });
-    addImportsFrom([
-      "createPowerSyncPlugin",
-      "providePowerSync",
-      "usePowerSync",
-      "usePowerSyncQuery",
-      "usePowerSyncStatus",
-      "usePowerSyncWatchedQuery",
-      "useQuery",
-      "useStatus",
-      "useWatchedQuerySubscription"
-    ], "@powersync/vue");
+    addImportsFrom(
+      [
+        "createPowerSyncPlugin",
+        "providePowerSync",
+        "usePowerSync",
+        "usePowerSyncQuery",
+        "usePowerSyncStatus",
+        "usePowerSyncWatchedQuery",
+        "useQuery",
+        "useStatus",
+        "useWatchedQuerySubscription"
+      ],
+      "@powersync/vue"
+    );
     nuxt.options.build.transpile = nuxt.options.build.transpile || [];
     nuxt.options.build.transpile.push("reka-ui", "@tanstack/vue-table", "@powersync/web", "@journeyapps/wa-sqlite");
     if (options.kysely) {

package/dist/runtime/components/BucketsInspectorTab.d.vue.ts

@@ -1,3 +1,3 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/BucketsInspectorTab.vue

@@ -1,19 +1,7 @@
 <template>
   <TooltipProvider :delay-duration="100">
-    <div
-      border="t"
-      border-color="gray-100"
-      relative
-      n-bg="base"
-      flex="~ col"
-      h="screen"
-      overflow="hidden"
-    >
-      <SplitterGroup
-        id="buckets-splitter-group"
-        class="h-full"
-        direction="horizontal"
-      >
+    <div border="t" border-color="gray-100" relative n-bg="base" flex="~ col" h="screen" overflow="hidden">
+      <SplitterGroup id="buckets-splitter-group" class="h-full" direction="horizontal">
         <!-- Buckets List Panel -->
         <SplitterPanel
           id="buckets-list-panel"
@@ -25,9 +13,7 @@
             <!-- Header -->
             <div class="p-3 border-b border-gray-200 dark:border-neutral-700">
               <div class="flex items-center justify-between mb-2">
-                <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
-                  Buckets
-                </h2>
+                <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Buckets</h2>
                 <NBadge n="slate xs">
                   {{ filteredBuckets.length }}
                 </NBadge>
@@ -51,25 +37,16 @@
                 class="flex-1 flex items-center justify-center text-gray-500 dark:text-gray-400 text-sm mt-3"
               >
                 <div class="text-center">
-                  <NIcon
-                    icon="carbon:data-error"
-                    class="text-2xl mb-2"
-                  />
+                  <NIcon icon="carbon:data-error" class="text-2xl mb-2" />
                   <div>No buckets found</div>
                 </div>
               </div>
 
-              <div
-                v-else-if="isLoading"
-                class="flex-1 flex items-center justify-center"
-              >
+              <div v-else-if="isLoading" class="flex-1 flex items-center justify-center">
                 <NLoading />
               </div>
 
-              <div
-                v-else
-                class="p-2 space-y-1"
-              >
+              <div v-else class="p-2 space-y-1">
                 <div
                   v-for="bucket in filteredBuckets"
                   :key="bucket.name"
@@ -82,10 +59,7 @@
                   <div class="flex items-start justify-between">
                     <div class="flex-1 min-w-0 flex flex-col gap-1">
                       <div class="flex items-center gap-2 mb-1">
-                        <NIcon
-                          icon="carbon:db2-database"
-                          class="text-blue-500 flex-shrink-0"
-                        />
+                        <NIcon icon="carbon:db2-database" class="text-blue-500 flex-shrink-0" />
                         <span class="font-medium text-gray-900 dark:text-gray-100 truncate">
                           {{ bucket.name }}
                         </span>
@@ -97,10 +71,7 @@
                         <TooltipRoot>
                           <TooltipTrigger as-child>
                             <div class="flex items-center gap-1">
-                              <NIcon
-                                icon="carbon:data-volume"
-                                class="text-xs"
-                              />
+                              <NIcon icon="carbon:data-volume" class="text-xs" />
                               <span>{{ formatBytes(bucket.data_size || 0) }}</span>
                             </div>
                           </TooltipTrigger>
@@ -116,10 +87,7 @@
                         <TooltipRoot>
                           <TooltipTrigger as-child>
                             <div class="flex items-center gap-1">
-                              <NIcon
-                                icon="carbon:data-2"
-                                class="text-xs"
-                              />
+                              <NIcon icon="carbon:data-2" class="text-xs" />
                               <span>{{ bucket.row_count || 0 }} rows</span>
                             </div>
                           </TooltipTrigger>
@@ -135,10 +103,7 @@
                         <TooltipRoot>
                           <TooltipTrigger as-child>
                             <div class="flex items-center gap-1">
-                              <NIcon
-                                icon="carbon:array-objects"
-                                class="text-xs"
-                              />
+                              <NIcon icon="carbon:array-objects" class="text-xs" />
                               <span>{{ formatBytes(bucket.metadata_size || 0) }}</span>
                             </div>
                           </TooltipTrigger>
@@ -154,10 +119,7 @@
                         <TooltipRoot>
                           <TooltipTrigger as-child>
                             <div class="flex items-center gap-1">
-                              <NIcon
-                                icon="carbon:download"
-                                class="text-xs"
-                              />
+                              <NIcon icon="carbon:download" class="text-xs" />
                               <span>{{ formatBytes(bucket.download_size || 0) }}</span>
                             </div>
                           </TooltipTrigger>
@@ -175,23 +137,14 @@
                         <div class="flex items-center gap-1 flex-wrap">
                           <span class="text-xs text-gray-500 dark:text-gray-400">Tables:</span>
                           <template v-if="JSON.parse(bucket.tables) && JSON.parse(bucket.tables).length > 0">
-                            <template
-                              v-for="tableName in JSON.parse(bucket.tables).slice(0, 3)"
-                              :key="tableName"
-                            >
-                              <NBadge
-                                n="gray xs"
-                                class="text-xs"
-                              >
+                            <template v-for="tableName in JSON.parse(bucket.tables).slice(0, 3)" :key="tableName">
+                              <NBadge n="gray xs" class="text-xs">
                                 {{ tableName }}
                               </NBadge>
                             </template>
                             <TooltipRoot v-if="JSON.parse(bucket.tables).length > 3">
                               <TooltipTrigger as-child>
-                                <NBadge
-                                  n="gray xs"
-                                  class="text-xs"
-                                >
+                                <NBadge n="gray xs" class="text-xs">
                                   +{{ JSON.parse(bucket.tables).length - 3 }}
                                 </NBadge>
                               </TooltipTrigger>
@@ -203,12 +156,7 @@
                               </TooltipContent>
                             </TooltipRoot>
                           </template>
-                          <span
-                            v-else
-                            class="text-xs text-gray-500 dark:text-gray-400"
-                          >
-                            No tables
-                          </span>
+                          <span v-else class="text-xs text-gray-500 dark:text-gray-400"> No tables </span>
                         </div>
                         <NBadge
                           :n="bucket.downloading ? 'blue' : 'gray'"
@@ -232,62 +180,35 @@
         />
 
         <!-- Bucket Content Panel -->
-        <SplitterPanel
-          id="bucket-content-panel"
-          :min-size="30"
-          class="flex flex-col overflow-hidden"
-        >
-          <div
-            v-if="!selectedBucket"
-            class="flex w-full h-full justify-center items-center"
-          >
-            <div
-              text="sm gray-500"
-              flex="~ gap-2 items-center"
-            >
+        <SplitterPanel id="bucket-content-panel" :min-size="30" class="flex flex-col overflow-hidden">
+          <div v-if="!selectedBucket" class="flex w-full h-full justify-center items-center">
+            <div text="sm gray-500" flex="~ gap-2 items-center">
               <NIcon icon="carbon:data-base" />
               <span>Select a bucket to view its content</span>
             </div>
           </div>
 
-          <div
-            v-else
-            class="flex-1 flex flex-col overflow-hidden"
-          >
+          <div v-else class="flex-1 flex flex-col overflow-hidden">
             <!-- Bucket Header -->
             <div class="p-3 border-b border-gray-200 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
               <div class="flex items-center justify-between">
                 <div class="flex items-center gap-2">
-                  <NIcon
-                    icon="carbon:data-base"
-                    class="text-blue-500"
-                  />
+                  <NIcon icon="carbon:data-base" class="text-blue-500" />
                   <h3 class="font-semibold text-gray-900 dark:text-gray-100">
                     {{ selectedBucket.name }}
                   </h3>
-                  <NBadge n="blue xs">
-                    {{ bucketContentRows?.length || 0 }} items
-                  </NBadge>
+                  <NBadge n="blue xs"> {{ bucketContentRows?.length || 0 }} items </NBadge>
                 </div>
 
                 <div class="flex items-center gap-2">
-                  <NButton
-                    n="xs"
-                    icon="carbon:refresh"
-                    @click="refreshBucketContent"
-                  >
-                    Refresh
-                  </NButton>
+                  <NButton n="xs" icon="carbon:refresh" @click="refreshBucketContent"> Refresh </NButton>
                 </div>
               </div>
             </div>
 
             <!-- Bucket Content Table -->
             <div class="flex-1 overflow-hidden">
-              <div
-                v-if="isLoadingContent"
-                class="flex justify-center items-center h-full"
-              >
+              <div v-if="isLoadingContent" class="flex justify-center items-center h-full">
                 <NLoading />
               </div>
 
@@ -295,9 +216,7 @@
                 v-else-if="bucketContentError"
                 class="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded m-4"
               >
-                <div class="text-red-800 dark:text-red-200 font-medium">
-                  Error loading bucket content:
-                </div>
+                <div class="text-red-800 dark:text-red-200 font-medium">Error loading bucket content:</div>
                 <div class="text-red-700 dark:text-red-300 text-sm mt-1">
                   {{ bucketContentError }}
                 </div>
@@ -308,12 +227,12 @@
                 class="flex-1 flex flex-col overflow-hidden"
               >
                 <!-- Table Controls -->
-                <div class="px-3 py-2 flex justify-between items-center bg-gray-50 dark:bg-neutral-800 border-b border-gray-200 dark:border-neutral-700 flex-shrink-0">
+                <div
+                  class="px-3 py-2 flex justify-between items-center bg-gray-50 dark:bg-neutral-800 border-b border-gray-200 dark:border-neutral-700 flex-shrink-0"
+                >
                   <div class="flex items-center gap-3">
                     <div class="text-xs text-gray-600 dark:text-gray-400">
-                      {{ bucketContentRows.length }} row{{
-                        bucketContentRows.length !== 1 ? "s" : ""
-                      }}
+                      {{ bucketContentRows.length }} row{{ bucketContentRows.length !== 1 ? "s" : "" }}
                     </div>
                   </div>
 
@@ -383,24 +302,14 @@
   maxWidth: `${header.getSize()}px`,
   minWidth: `${header.getSize()}px`
 }"
-                          @click="
-  header.column.getToggleSortingHandler()?.($event)
-"
+                          @click="header.column.getToggleSortingHandler()?.($event)"
                         >
                           <div class="flex items-center gap-1 min-w-0">
                             <div class="truncate flex-1 min-w-0">
-                              <FlexRender
-                                :render="header.column.columnDef.header"
-                                :props="header.getContext()"
-                              />
+                              <FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
                             </div>
-                            <span
-                              v-if="header.column.getIsSorted()"
-                              class="text-xs flex-shrink-0"
-                            >
-                              {{
-                                header.column.getIsSorted() === "asc" ? "\u25B2" : "\u25BC"
-                              }}
+                            <span v-if="header.column.getIsSorted()" class="text-xs flex-shrink-0">
+                              {{ header.column.getIsSorted() === "asc" ? "\u25B2" : "\u25BC" }}
                             </span>
                           </div>
                           <!-- Column Resize Handle -->
@@ -411,16 +320,12 @@
                             @touchstart="header.getResizeHandler()?.($event)"
                             @click.stop
                           >
-                            <div
-                              class="w-full h-full group-hover:bg-gray-500 transition-colors duration-150"
-                            />
+                            <div class="w-full h-full group-hover:bg-gray-500 transition-colors duration-150" />
                           </div>
                         </th>
                       </tr>
                     </thead>
-                    <tbody
-                      class="bg-white dark:bg-neutral-900 border-t border-gray-200 dark:border-neutral-700"
-                    >
+                    <tbody class="bg-white dark:bg-neutral-900 border-t border-gray-200 dark:border-neutral-700">
                       <tr
                         v-for="row in table.getRowModel().rows"
                         :key="row.id"
@@ -436,14 +341,8 @@
   minWidth: `${cell.column.getSize()}px`
 }"
                         >
-                          <div
-                            class="truncate w-full"
-                            :title="String(cell.getValue())"
-                          >
-                            <FlexRender
-                              :render="cell.column.columnDef.cell"
-                              :props="cell.getContext()"
-                            />
+                          <div class="truncate w-full" :title="String(cell.getValue())">
+                            <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
                           </div>
                         </td>
                       </tr>
@@ -452,13 +351,8 @@
                 </div>
               </div>
 
-              <div
-                v-else
-                class="text-center py-8"
-              >
-                <div class="text-gray-500 dark:text-gray-400">
-                  No content found in this bucket
-                </div>
+              <div v-else class="text-center py-8">
+                <div class="text-gray-500 dark:text-gray-400">No content found in this bucket</div>
               </div>
             </div>
           </div>
@@ -629,11 +523,15 @@ watch(
     pageSizeInput.value = String(newPageSize);
   }
 );
-watch(bucketRows, () => {
-  if (bucketRows.value) {
-    initializeFuse();
-  }
-}, { immediate: true });
+watch(
+  bucketRows,
+  () => {
+    if (bucketRows.value) {
+      initializeFuse();
+    }
+  },
+  { immediate: true }
+);
 onMounted(async () => {
   if (bucketRows.value) {
     initializeFuse();

package/dist/runtime/components/BucketsInspectorTab.vue.d.ts

@@ -1,3 +1,3 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ConfigInspectorTab.d.vue.ts

@@ -1,3 +1,3 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 declare const _default: typeof __VLS_export;
 export default _default;