diff --git a/.gitignore b/.gitignore index 64d4b634..28f32d0a 100644 --- a/.gitignore +++ b/.gitignore @@ -80,4 +80,6 @@ dist # IDE .idea -cache \ No newline at end of file +cache + +.output \ No newline at end of file diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 9539d6f8..687c6eda 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/ban-ts-comment */ import { fileURLToPath } from 'url' import type { DefaultTheme } from 'vitepress' import { defineConfig } from 'vitepress' @@ -15,6 +14,7 @@ const themeConfig: DefaultTheme.Config = { items: [ { text: 'Quick Start', link: '/guide/quick-start' }, { text: 'Usage', link: '/guide/usage' }, + { text: 'Nuxtjs', link: '/guide/nuxtjs' }, { text: 'API Reference', link: '/guide/api-reference/renderer' }, { text: 'Elements', link: '/guide/elements/animated-sprite' }, { text: 'Components', link: '/guide/components/application' }, @@ -45,6 +45,7 @@ const themeConfig: DefaultTheme.Config = { { text: 'Introduction', link: '/guide/introduction' }, { text: 'Quick Start', link: '/guide/quick-start' }, { text: 'Usage', link: '/guide/usage' }, + { text: 'Nuxtjs', link: '/guide/nuxtjs' }, ], }, { @@ -244,7 +245,6 @@ export default defineConfig({ config: md => md.use(mdPlugin), }, vite: { - // @ts-expect-error plugins: [unocss()], ssr: { noExternal: ['naive-ui', 'gsap'] }, resolve: { diff --git a/docs/guide/nuxtjs.md b/docs/guide/nuxtjs.md new file mode 100644 index 00000000..ec1a5cbf --- /dev/null +++ b/docs/guide/nuxtjs.md @@ -0,0 +1,42 @@ +# Using in Nuxtjs + +Repository is [here](https://github.com/hairyf/vue3-pixi/tree/main/packages/vue3-pixi-nuxt) + +如果你要在 Nuxtjs 中使用，安装以下模块： + + +## Install + +::: code-group + +```bash [npm] +npm install vue3-pixi vue3-pixi-nuxt +``` + +```bash [yarn] +yarn add vue3-pixi vue3-pixi-nuxt +``` + +```bash [pnpm] +pnpm add vue3-pixi vue3-pixi-nuxt +``` + +::: + +## Features + +- Auto-import components and composable from the vue3-pixi +- `` client only, you don't need to add `` +- Automatically configures `isCustomElement` for vue compiler + +## Usage + +Add `vue3-pixi-nuxt` to the `modules` section of `nuxt.config.ts` + +```ts +export default defineNuxtConfig({ + modules: ['vue3-pixi-nuxt'], +}) +``` + +now, you can use `vue3-pixi` in your Nuxt app \ No newline at end of file diff --git a/packages/vue3-pixi-nuxt/.nuxtrc b/packages/vue3-pixi-nuxt/.nuxtrc new file mode 100644 index 00000000..e31c4f69 --- /dev/null +++ b/packages/vue3-pixi-nuxt/.nuxtrc @@ -0,0 +1 @@ +typescript.includeWorkspace=true \ No newline at end of file diff --git a/packages/vue3-pixi-nuxt/README.md b/packages/vue3-pixi-nuxt/README.md new file mode 100644 index 00000000..29f50321 --- /dev/null +++ b/packages/vue3-pixi-nuxt/README.md @@ -0,0 +1,78 @@ +

Vue 3 Pixi Nuxt

+ +

+ Nuxt for PixiJS Projection based on vue3-pixi +

+ +
+ + +## Install + +```sh +# Using pnpm +pnpm add vue3-pixi-nuxt + +# Using yarn +yarn add vue3-pixi-nuxt + +# Using npm +npm install vue3-pixi-nuxt +``` + +## Usage + +using `vue3-pixi-projection` requires loading the module before using `vue3-pixi` + +```ts +import { renderer } from 'vue3-pixi' +import ProjectionRenderer from 'vue3-pixi-projection' + +renderer.use(ProjectionRenderer) +``` + +in template use `camera-3d` and `sprite-3d` components: + +```vue + +``` + +## Elements + +- Camera3d +- Container2d +- Container3d +- Sprite2d +- Sprite2s +- Sprite3d +- Text2d +- Text2s +- Text3d +- TilingSprite2d +- SimpleMesh2d +- SimpleMesh3d2d +- Mesh2d +- Mesh3d2d + +## converts + +conversion will cause unstable behavior of the renderer and is not recommended. Please use elements with specific suffixes + +## License + +[MIT](LICENSE) License © 2022-PRESENT [hairyf](https://github.com/hairyf) diff --git a/packages/vue3-pixi-nuxt/package.json b/packages/vue3-pixi-nuxt/package.json new file mode 100644 index 00000000..28bb12a9 --- /dev/null +++ b/packages/vue3-pixi-nuxt/package.json @@ -0,0 +1,70 @@ +{ + "name": "vue3-pixi-nuxt", + "type": "module", + "version": "0.8.5", + "description": "Nuxt createRenderer for PixiJS", + "license": "MIT", + "homepage": "https://github.com/hairyf/vue3-pixi#readme", + "repository": "vue3-pixi", + "keywords": [ + "pixi.js", + "vue" + ], + "publishConfig": { + "access": "public" + }, + "sideEffects": false, + "exports": { + ".": { + "types": "./dist/types.d.mts", + "default": "./dist/module.mjs" + } + }, + "main": "dist/module.mjs", + "types": "dist/types.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build": "nuxt-module-build build", + "dev": "nuxi dev playground", + "dev:build": "nuxi build playground", + "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground", + "postinstall": "npm run dev:prepare", + "prepublishOnly": "npm run build" + }, + "dependencies": { + "@antfu/utils": "^0.7.2", + "@nuxt/kit": "^3.8.2", + "mlly": "^1.4.2", + "pkg-types": "^1.0.3", + "sirv": "^2.0.3", + "vue-demi": "^0.14.1", + "vue3-pixi": "^0.8.5" + }, + "devDependencies": { + "@nuxt/module-builder": "^0.5.4", + "@nuxt/schema": "^3.8.2", + "@vue/runtime-core": "^3", + "nuxt": "^3.8.2" + }, + "build": { + "externals": [ + "node:child_process", + "vite-plugin-glsl", + "@rollup/pluginutils", + "vite", + "esbuild", + "rollup", + "estree-walker", + "picomatch", + "postcss", + "lightningcss", + "fsevents", + "pnpapi", + "picocolors", + "source-map-js", + "nanoid/non-secure" + ] + } +} diff --git a/packages/vue3-pixi-nuxt/src/module.ts b/packages/vue3-pixi-nuxt/src/module.ts new file mode 100644 index 00000000..00eaa6ec --- /dev/null +++ b/packages/vue3-pixi-nuxt/src/module.ts @@ -0,0 +1,51 @@ +import { addComponent, addImports, createResolver, defineNuxtModule } from '@nuxt/kit' +import * as core from 'vue3-pixi' +import { isCustomElement } from 'vue3-pixi' + +const resolver = createResolver(import.meta.url) + +const components = [ + 'Application', + 'PixiTransition', + 'PixiTransitionGroup', + 'PTransition', + 'PTransitionGroup', + 'External', + 'Loader', +] + +export interface ModuleOptions {} + +export default defineNuxtModule({ + meta: { name: 'vue3-pixi-nuxt' }, + async setup(options, nuxt) { + for (const name of components) { + addComponent({ + name, + filePath: 'vue3-pixi', + export: name, + mode: 'client', + _raw: true, + }) + addComponent({ + name, + filePath: name === 'Application' + ? resolver.resolve('./runtime/ServerApplication.vue') + : resolver.resolve('./runtime/ServerEmpty.vue'), + mode: 'server', + }) + } + + for (const name in core) { + if (name.match(/^use/) || name.match(/^on[A-Z]{1}/)) { + addImports({ + from: 'vue3-pixi', + name, + }) + } + } + + nuxt.options.build.transpile.push(/vue3-pixi/) + nuxt.options.vue.compilerOptions.isCustomElement = isCustomElement + }, +}) diff --git a/packages/vue3-pixi-nuxt/src/runtime/ServerApplication.vue b/packages/vue3-pixi-nuxt/src/runtime/ServerApplication.vue new file mode 100644 index 00000000..a0679bc6 --- /dev/null +++ b/packages/vue3-pixi-nuxt/src/runtime/ServerApplication.vue @@ -0,0 +1,7 @@ + + + diff --git a/packages/vue3-pixi-nuxt/src/runtime/ServerEmpty.vue b/packages/vue3-pixi-nuxt/src/runtime/ServerEmpty.vue new file mode 100644 index 00000000..9a8d9e33 --- /dev/null +++ b/packages/vue3-pixi-nuxt/src/runtime/ServerEmpty.vue @@ -0,0 +1,3 @@ + +