feat: add nuxt module

packages/nuxt/package.json

@@ -3,8 +3,8 @@
  "type": "module",
  "version": "0.0.0",
  "packageManager": "pnpm@8.13.0",
- "description": "add description",
- "author": "add author",
+ "description": "A tiny, performant animation library for NuxtJS",
+ "author": "Mehmet productdevbook <hi@productdevbook.com>",
  "license": "MIT",
  "funding": "https://github.com/sponsors/productdevbook",
  "homepage": "https://github.com/oku-ui/motion",
@@ -40,7 +40,7 @@
  "dev": "nuxi dev playground",
  "dev:build": "nuxi build playground",
  "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
- "release": "pnpm build && bumpp --commit --push --tag && pnpm publish",
+ "release": "pnpm build && pnpm bumpp --commit='version(nuxt): release %s' --no-tag && pnpm publish",
  "lint": "eslint .",
  "lint:fix": "eslint . --fix",
  "test": "vitest run",
@@ -51,7 +51,8 @@
  "vue": ">=3.3.0"
  },
  "dependencies": {
- "@nuxt/kit": "^3.9.0"
+ "@nuxt/kit": "^3.9.0",
+ "@oku-ui/motion": "latest"
  },
  "devDependencies": {
  "@nuxt/module-builder": "^0.5.5",

packages/nuxt/playground/app.vue

@@ -1,8 +1,59 @@
-<script setup>
+<script setup lang="ts">
+import { Motion } from '@oku-ui/motion'
+
+const rotate = ref(10)
 </script>
 
 <template>
- <div>
- Nuxt module playground!
+ <Motion
+ :animate="{
+ rotate: `${rotate}deg`,
+ backgroundColor: 'var(--yellow)' }"
+ :transition="{
+ duration: 1,
+ rotate: { duration: 2 },
+ }"
+ />
+
+ <div
+ :style="{
+ marginTop: '50px',
+ }"
+ >
+ <button @click="rotate += 20">
+ Rotate
+ </button>
  </div>
+
+ <Motion
+ :initial="{ opacity: 0, x: -50 }"
+ :in-view="{
+ opacity: 1,
+ x: 0,
+ transition: {
+ delay: 0.5,
+ easing: [0.17, 0.55, 0.55, 1],
+ duration: 0.9,
+ },
+ }"
+ >
+ <p>
+ Lorem Ipsum
+ </p>
+ </Motion>
 </template>
+
+<style>
+body {
+ padding: 100px;
+}
+:root {
+ --yellow: #000
+}
+
+div {
+ width: 100px;
+ height: 100px;
+ border-radius: 10px;
+}
+</style>

packages/nuxt/src/module.ts

@@ -1,35 +1,50 @@
-import { addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'
+import { addComponent, defineNuxtModule } from '@nuxt/kit'
 
-// Module options TypeScript interface definition
 export interface ModuleOptions {
- apiKey: string
+ autoImportComponents?: boolean
+ prefix?: string
 }
 
-export interface ModuleHooks {
- 'my-module:init': any
-}
+// export interface ModuleHooks {
+//  'my-module:init': any
+// }
 
-export interface ModulePublicRuntimeConfig {
- NAME: string
-}
+// export interface ModulePublicRuntimeConfig {
+//  NAME: string
+// }
 
-export interface ModuleRuntimeConfig {
- PRIVATE_NAME: string
-}
+// export interface ModuleRuntimeConfig {
+// PRIVATE_NAME: string
+// }
+
+const motionComponents = [
+ 'Motion',
+ 'Presence',
+ 'PresenceGroup',
+]
 
 export default defineNuxtModule<ModuleOptions>({
  meta: {
- name: 'my-module',
- configKey: 'myModule',
+ name: '@oku-ui/motion-nuxt',
+ configKey: 'motion',
  },
- // Default configuration options of the Nuxt module
  defaults: {
- apiKey: '',
+ autoImportComponents: true,
  },
- setup(_options, _nuxt) {
- const resolver = createResolver(import.meta.url)
+ setup(options, _nuxt) {
+ // const resolver = createResolver(import.meta.url)
+
+ if (options.autoImportComponents) {
+ motionComponents.forEach((component) => {
+ addComponent({
+ name: `${options.prefix}${component}`,
+ export: component,
+ filePath: '@oku-ui/motion',
+ })
+ })
+ }
 
  // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
- addPlugin(resolver.resolve('./runtime/plugin'))
+ // addPlugin(resolver.resolve('./runtime/plugin'))
  },
 })

packages/vue/package.json

@@ -7,12 +7,12 @@
  "author": "Mehmet productdevbook <hi@productdevbook.com>",
  "license": "MIT",
  "funding": "https://github.com/sponsors/productdevbook",
- "homepage": "https://github.com/productdevbookcom/@oku-ui/motion",
+ "homepage": "https://github.com/oku/oku-ui/motion",
  "repository": {
  "type": "git",
- "url": "https://github.com/productdevbookcom/@oku-ui/motion.git"
+ "url": "https://github.com/oku/oku-ui/motion.git"
  },
- "bugs": "https://github.com/productdevbookcom/@oku-ui/motion/issues",
+ "bugs": "https://github.com/oku/oku-ui/motion/issues",
  "keywords": [
  "vue",
  "motion"