Merge pull request #187 from tmg0/feat/nuxt-module

Feat: nuxt module

README.md

@@ -93,6 +93,19 @@ const vHero = directive()
 </template>
 ```
 
+### Nuxt
+
+`hero-motion` also provide nuxt module for quick start
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['hero-motion/nuxt'],
+})
+```
+
+`hero-motion/nuxt` will auto import `Hero` component, and do not need to wrap root component with `HeroProvider`.
+
 ## Playground
 
 See [playground](./playground/vite/README.md).

eslint.config.mjs

@@ -1,6 +1,3 @@
 import antfu from '@antfu/eslint-config'
-import oxlint from 'eslint-plugin-oxlint'
 
-export default antfu({
-  ...oxlint.configs['flat/recommended'],
-})
+export default antfu()

package.json

@@ -1,6 +1,7 @@
 {
   "name": "hero-motion",
   "version": "0.3.3",
+  "packageManager": "pnpm@9.3.0+sha1.d4f1da7af76dbdb4ab1a08f6b5add602ffad6fd4",
   "description": "A shared layout animations for vue like framer motion.",
   "author": "zekun.jin",
   "license": "MIT",
@@ -23,15 +24,23 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
+    },
+    "./nuxt": {
+      "types": "./dist/nuxt/index.d.ts",
+      "import": "./dist/nuxt/index.mjs",
+      "require": "./dist/nuxt/index.cjs"
     }
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "scripts": {
     "dev": "tsup --watch",
-    "play:vite": "cd playground/vite && pnpm dev",
-    "build": "tsup",
+    "play": "pnpm play:vite",
+    "play:vite": "cd playgrounds/vite && pnpm dev",
+    "play:nuxt": "cd playgrounds/nuxt && pnpm dev",
+    "build": "pnpm build:nuxt || tsup",
+    "build:nuxt": "nuxt-module-build build --outDir ./dist/nuxt",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "test": "vitest"
@@ -41,20 +50,19 @@
     "vue": ">=3.0.0"
   },
   "dependencies": {
+    "@nuxt/kit": "^3.13.2",
     "@vueuse/core": "^11.0.3",
     "defu": "^6.1.4"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.6.0",
+    "@nuxt/module-builder": "^0.8.4",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@vue/tsconfig": "^0.5.1",
     "@vueuse/motion": "^2.2.5",
     "eslint": "^9.10.0",
-    "eslint-plugin-oxlint": "^0.9.5",
-    "oxlint": "^0.9.5",
     "tsup": "^8.2.4",
     "typescript": "^5.6.2",
-    "unplugin-oxlint": "^0.6.2",
     "unplugin-vue-jsx": "^0.4.0",
     "vitest": "^2.1.1",
     "vue": "^3.5.5"

playgrounds/nuxt/.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

playgrounds/nuxt/app.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const isLarge = ref(false)
+</script>
+
+<template>
+  <div :transition="{ type: 'spring' }">
+    <Hero v-if="!isLarge" layout-id="1" style="width: 50px; height: 50px; background: #f43f5e;" @click="isLarge = !isLarge" />
+    <Hero v-else layout-id="1" style="width: 100px; height: 100px; background: #2dd4bf;" @click="isLarge = !isLarge" />
+  </div>
+</template>

playgrounds/nuxt/nuxt.config.ts

@@ -0,0 +1,12 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-04-03',
+  devtools: { enabled: false },
+  modules: ['../../src/module'],
+
+  hero: {
+    transition: {
+      type: 'spring',
+    },
+  },
+})

playgrounds/nuxt/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@hero-motion/nuxt",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "hero-motion": "workspace:*",
+    "nuxt": "^3.13.2",
+    "vue": "latest",
+    "vue-router": "latest"
+  }
+}

playgrounds/nuxt/public/robots.txt

@@ -0,0 +1 @@
+

playgrounds/nuxt/server/tsconfig.json

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

playgrounds/nuxt/tsconfig.json

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

playground/vite/README.md → playgrounds/vite/README.md

@@ -12,7 +12,7 @@ You can also run `pnpm play:vite` in the root dir on your local environment.
 
 ## Tabs Component
 
-There is a [Tabs Component]('./playground/vite/components/Tabs') in playgound vite example, and let's pay attention to the [TabCursor]('./playground/vite/components/Tabs/TabCursor.vue')
+There is a [Tabs Component]('./playgrounds/vite/components/Tabs') in playgound vite example, and let's pay attention to the [TabCursor]('./playgrounds/vite/components/Tabs/TabCursor.vue')
 
 This is the slider cursor for each `Tab` under the `Tabs` component.
 
@@ -62,7 +62,7 @@ const emit = defineEmits(['click'])
 
 `hero-motion` support tansition across different pages, even when components are under different routes, ensure smooth transitions when navigating between them.
 
-See the [Avatar]('./playground/vite/components/Avatar.vue') component in the playground:
+See the [Avatar]('./playgrounds/vite/components/Avatar.vue') component in the playground:
 
 ```vue
 <script setup lang="ts">

playground/vite/package.json → playgrounds/vite/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@vueuse/core": "^11.0.3",
     "@vueuse/motion": "^2.2.5",
-    "hero-motion": "workspace:^",
+    "hero-motion": "workspace:*",
     "vue": "^3.5.5",
     "vue-router": "^4.4.5"
   },