troisjs / trois

✨ ThreeJS + VueJS 3 + ViteJS ⚡
https://troisjs.github.io
MIT License
4.25k stars 306 forks source link

Nuxt.js Add in #44

Closed differentMonster closed 3 years ago

differentMonster commented 3 years ago

I am having this error after setting up the trios js

@/plugins/trois-js.js

import Vue from 'vue';

import {
    TroisJSVuePlugin
} from 'troisjs';

if (process.browser) {
    Vue.use(TroisJSVuePlugin);
}

@/pages/customize.vue

<template>
    <Renderer ref="renderer">
        <Camera :position="{ z: 100 }"></Camera>
        <LambertMaterial id="material"></LambertMaterial>
        <Scene>
            <PointLight :position="{ y: 50, z: 50 }"></PointLight>
            <Box ref="box" :size="10" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }" material="material"></Box>
        </Scene>
    </Renderer>
</template>

<script>
    export default {
        mounted() {
            const renderer = this.$refs.renderer;
            const box = this.$refs.box.mesh;

            renderer.onBeforeRender(() => {
                box.rotation.x += 0.01;
            });
        },
    };
</script> 

Error: Uncaught SyntaxError: The requested module '/@fs/run/media/monster/Backup/manjaro/app/x-3D/frontend/node_modules/deepmerge/dist/cjs.js' does not provide an export named 'default'

klevron commented 3 years ago

Hi, what version of Nuxt are you using ? Nuxt is not VueJS3 compatible yet. The error message is about deepmerge, not TroisJS .

differentMonster commented 3 years ago

Yeah i am using Nuxt version 2, hopefully nuxt quickly update to 3