Skip to content

Commit

Permalink
docs: blog tresjs nuxt module announcement (#313)
Browse files Browse the repository at this point in the history
* docs: blog announcement

* docs: blog announcement for nuxt module
  • Loading branch information
alvarosabu committed Jun 22, 2023
1 parent 6d46188 commit f289317
Show file tree
Hide file tree
Showing 4 changed files with 133 additions and 5 deletions.
4 changes: 2 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,5 @@ coverage
*.njsproj
*.sln
*.sw?
docs/.vitepress/dist
docs/.vitepress/cache/deps/*.*
docs/.vitepress/dist/
docs/.vitepress/cache/
3 changes: 0 additions & 3 deletions docs/.vitepress/cache/deps_temp_9655456f/package.json

This file was deleted.

131 changes: 131 additions & 0 deletions docs/blog/announcing-tres-nuxt-module.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
---
sidebar: false
---

![Announcing TresJS Nuxt Module](/blog/tresjs-nuxt-module.png)

---

# Announcing Nuxt Module `@tresjs/nuxt` <i class="i-logo-nuxt" /> 🎉

We are absolutetly thriller to announce to the community the release of most anticipated **Nuxt module for TresJS** 🎉 .

Special thanks to [NuxtJS](https://nuxtjs.org/) and [DanielRoe](https://twitter.com/danielcroe) for the support and for the amazing work they are doing for the Vue community.

1. Add `@tresjs/nuxt` dependency to your project

```bash
# Using pnpm
pnpm add @tresjs/nuxt

# Using yarn
yarn add @tresjs/nuxt

# Using npm
npm install @tresjs/nuxt
```

2. Add `@tresjs/nuxt` to the `modules` section of `nuxt.config.ts`

```js
export default defineNuxtConfig({
modules: ["@tresjs/nuxt"],
});
```

## What's Nuxt? 🔥

We took advantage of the [Nuxt module system](https://nuxt.com/docs/guide/going-further/modules) to create a module that will allow you to use TresJS in your Nuxt app with 0-to-none configuration enjoying all the DX perks that comes with Nuxt like:

### Auto import components and composables from the TresJS ecosystem

You don't need to import the components or composables from the TresJS ecosystem anymore, they will be auto-imported for you. This is a huge improvement for the DX, you can just start using the components and composables without worrying about importing them.

You just need to install the packages you want to use and they will be auto-imported by the module 🧙🏼‍♂️.

```bash
# Using pnpm
pnpm add @tresjs/cientos @tresjs/post-processing
```

#### Before

```vue
<script setup lang="ts">
import { TresCanvas, useRenderLoop } from '@tresjs/core'
import { OrbitControls } from '@tresjs/cientos'
import { EffectComposer, Bloom } from '@tresjs/post-processing'
const { onLoop } = useRenderLoop()
</script>
<template>
<TresCanvas>
<TresPerspectiveCamera :position="[5, 5, 5]" />
<OrbitControls />
<TresMesh :position="[-2, 2, 0]" :rotation="[0, Math.PI, 0]">
<TresConeGeometry :args="[1, 1.5, 3]" />
<TresMeshToonMaterial color="#82DBC5" />
</TresMesh>
<EffectComposer>
<Bloom />
</EffectComposer>
<TresAmbientLight :intensity="1" />
<TresDirectionalLight :position="[0, 2, 4]" :intensity="1" />
</TresCanvas>
</template>
```


#### After 🥹

```vue
<script setup lang="ts">
const { onLoop } = useRenderLoop()
</script>
<template>
<TresCanvas>
<TresPerspectiveCamera :position="[5, 5, 5]" />
<OrbitControls />
<TresMesh :position="[-2, 2, 0]" :rotation="[0, Math.PI, 0]">
<TresConeGeometry :args="[1, 1.5, 3]" />
<TresMeshToonMaterial color="#82DBC5" />
</TresMesh>
<EffectComposer>
<Bloom />
</EffectComposer>
<TresAmbientLight :intensity="1" />
<TresDirectionalLight :position="[0, 2, 4]" :intensity="1" />
</TresCanvas>
</template>
```

### Client-side only

The `<TresCanvas>` is only loaded in the client-side, so you don't need to worry about **SSR** or **SSG** 😊.

### Vue compiler optimizations ⚙️

Automagically ✨ configure the Vue compiler to recognize the TresJS Components. This is because `<TresCanvas />` component creates a custom renderer for Vue, so we need to tell the outside Vue app to recognize the TresJS components.

Without the module you need to configure the Vue compiler like this:

```ts
export default defineNuxtConfig({
vue: {
compilerOptions: {
isCustomElement: tag => (tag.startsWith('Tres') && tag !== 'TresCanvas') || tag === 'primitive',
},
}
})
```

See more [here](http://tresjs.org/guide/troubleshooting.html#failed-resolve-component-trescomponent-%F0%9F%A4%94)

## Share your work 🎨

We want to see what you are creating with TresJS and nuxt, so please share your work with us in our [Discord server](https://discord.gg/UCr96AQmWn) where we have a `#Showcase` area or in our [Twitter](https://twitter.com/tresjs_dev) 😊.

Happy coding! 🚀
Binary file added docs/public/blog/tresjs-nuxt-module.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit f289317

Please sign in to comment.