How do I import Three.js into my Nuxt project How do I import Three.js into my Nuxt project vue.js vue.js

How do I import Three.js into my Nuxt project


Finally I could find what was wrong.

Well, it has to do with nuxt building system. When using third parts libs, you should add them into nuxt.config.js bild->transpile array so it can be included as a dependency with Babel.

transpile: [ "three"]

Ref: https://nuxtjs.org/api/configuration-build#transpile


Threejs must be run on the client side so enclosed the component with <client-only> tag and loaded it dynamically with const MyComponent = () => import('~/path/to/MyComponent.vue'); but now I am getting the error on server side.


Finally I managed to do it like this!

<template>    <div>        <client-only>            <threejs-component />        </client-only>    </div></template><script>export default {    components: {        ThreejsComponent: process.browser ? () => import('~/path/to/ThreejsComponent.vue') : null    }}</script>

inside ThreejsComponent.vue are all the threejs imports