Support Nuxt 3

.github/workflows/ci.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Set node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 20.x
 
       - name: Setup
         run: npm i -g @antfu/ni
@@ -33,7 +33,7 @@ jobs:
 
     strategy:
       matrix:
-        node: [16.x, 18.x]
+        node: [20.x]
         os: [ubuntu-latest, windows-latest, macos-latest]
       fail-fast: false
 

README.md

@@ -54,10 +54,37 @@ export default defineConfig({
 })
 ```
 
-Example: [`playground/`](./playground/)
+<br></details>
+
+<details>
+<summary>Nuxt</summary><br>
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: [
+    [
+      'unplugin-overlay-layout/nuxt',
+      {
+        layoutPreview: {
+          style: {
+            position: 'absolute',
+            margin: 'auto',
+            inset: '0',
+            width: '13.34rem',
+            height: '7.5rem'
+          },
+          imageUrl: 'https://picsum.photos/200/300'
+        }
+      }
+    ]
+  ]
+})
 
+```
 <br></details>
 
+
 ## Configuration
 
 Options: [`Options/`](./src/types.ts)

package.json

@@ -87,7 +87,8 @@
     "build:plugin": "tsup",
     "build:fix": "esno scripts/postbuild.ts",
     "build:all": "npm run build:popup && npm run build:plugin && cp -r src/overlay-layout dist",
-    "dev:playground": "npm -C popup run dev & npm -C playground run dev",
+    "dev:vite": "npm -C popup run dev & npm -C playground/vite run dev",
+    "dev:nuxt3": "npm -C popup run dev & npm -C playground/nuxt3 run dev",
     "lint": "eslint .  --config .eslintrc.cjs",
     "lint:fix": "eslint .  --config .eslintrc.cjs && prettier --write -c .",
     "release": "npm run build:all && bumpp && npm publish",
@@ -123,7 +124,7 @@
     }
   },
   "dependencies": {
-    "@vueuse/core": "^10.7.2",
+    "@vueuse/core": "^10.9.0",
     "sirv": "^2.0.4",
     "unplugin": "^1.6.0"
   },
@@ -154,5 +155,8 @@
     "vite": "^5.0.5",
     "vitest": "^0.34.6",
     "webpack": "^5.89.0"
+  },
+  "resolutions": {
+    "ufo": "^1.5.3"
   }
 }

playground/nuxt3/.gitignore

@@ -0,0 +1,24 @@
+# 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

playground/nuxt3/README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the 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 run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

playground/nuxt3/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtWelcome />
+  </div>
+</template>

playground/nuxt3/nuxt.config.ts

@@ -0,0 +1,22 @@
+import OverlayLayout from '../../src/nuxt'
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  modules: [
+    [
+      OverlayLayout,
+      {
+        layoutPreview: {
+          style: {
+            position: 'absolute',
+            margin: 'auto',
+            inset: '0',
+            width: '13.34rem',
+            height: '7.5rem'
+          },
+          imageUrl: 'https://picsum.photos/200/300'
+        }
+      }
+    ]
+  ]
+})

playground/nuxt3/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "nuxt": "^3.11.2",
+    "vue": "^3.4.27",
+    "vue-router": "^4.3.2"
+  }
+}

playground/nuxt3/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

playground/nuxt3/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

playground/vite.config.ts → playground/vite/vite.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from 'vite'
 
-import OverlayLayout from '../src/vite'
+import OverlayLayout from '../../src/vite'
 
 export default defineConfig({
   plugins: [