How to use Troisjs in Nuxt 3 project

Question

I would like to use TroisJS ( three.js wrapper for Vue) with Nuxt.js . According to the TroisJS documentation ( https://troisjs.github.io/guide/install.html#existing-vuejs-3-project ) I need to add it to my project like:

import { TroisJSVuePlugin } from 'troisjs';
app.use(TroisJSVuePlugin);

However, I don"t know how to figure out where I should put this code. I would expect the nuxt.config.js file, but I don't seem to quite get it where it should go.

I decided to use TroisJS and not three.js because I thought the former might be easier to import and use. If importing three.js directly is easier, I don't mind using it.

Thank you very much for any help!

Answer 1

In /plugins folder add new file named troisjs-plugin.js with the following content :

import { TroisJSVuePlugin } from 'troisjs';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(TroisJSVuePlugin )
})

Answer 2

I found a repo with some testing with Trois and Nuxt 3, probably outdated and maybe some apis have changed, but if you wanna check it out: alvarosabu/nuxt3-trois

Also, there's an official repo from the Trois author with a Nuxt 3 custom plugin (probably outdated too) here