initial commit (nuxt mongo powersync)

Author: kemalcany

.gitignore

@@ -0,0 +1,26 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+.env.local

.prettierrc

@@ -0,0 +1,7 @@
+{
+    "semi": false,
+    "arrowParens": "always",
+    "singleQuote": true,
+    "printWidth": 200
+  }
+  

README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtPage />
+</template>
+
+<script setup lang="ts"></script>

nuxt.config.ts

@@ -0,0 +1,20 @@
+import wasm from 'vite-plugin-wasm'
+import topLevelAwait from 'vite-plugin-top-level-await'
+
+export default defineNuxtConfig({
+  compatibilityDate: '2024-07-08',
+  ssr: false,
+  spaLoadingTemplate: false,
+  devtools: { enabled: false },
+  vite: {
+    plugins: [topLevelAwait()],
+    optimizeDeps: {
+      exclude: ['@journeyapps/wa-sqlite', '@powersync/web'],
+      include: ['@powersync/web > js-logger'], // <-- Include `js-logger` when it isn't installed and imported.
+    },
+    worker: {
+      format: 'es',
+      plugins: () => [wasm(), topLevelAwait()],
+    },
+  },
+})

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@powersync/vue": "^0.2.2",
+    "@powersync/web": "^1.9.0",
+    "nuxt": "^3.13.2",
+    "vue": "latest",
+    "vue-router": "latest"
+  },
+  "devDependencies": {
+    "vite-plugin-top-level-await": "^1.4.4",
+    "vite-plugin-wasm": "^3.3.0"
+  }
+}

pages/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <main>
+    <h1>LISTS</h1>
+
+    <div v-if="isLoading">Loading...</div>
+    <div v-else-if="isFetching">Updating results...</div>
+
+    <div v-if="error">{{ error }}</div>
+    <ul v-else>
+      <li v-for="l in list" :key="l.id">{{ l.name }}</li>
+    </ul>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { useQuery } from '@powersync/vue'
+
+const query = ref('SELECT * from lists')
+const { data: list, isLoading, isFetching, error } = useQuery(query, [], {})
+</script>

plugins/usePowersync.ts

@@ -0,0 +1,18 @@
+import { PowerSyncDatabase } from '@powersync/web'
+import { createPowerSyncPlugin } from '@powersync/vue'
+import { Connector } from '~/powersync/Connector'
+import { AppSchema } from '~/powersync/AppSchema'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const db = new PowerSyncDatabase({
+    schema: AppSchema,
+    database: {
+      dbFilename: 'powersync.db',
+    },
+  })
+
+  const connector = new Connector()
+  db.connect(connector)
+
+  nuxtApp.vueApp.use(createPowerSyncPlugin({ database: db }))
+})