To create a seamless transition into a separate page on our site, we're going to need to use a single page framework like Nuxt or Next.js. Since Nuxt uses Vue, it is by default a much easier framework to use in my opinion, so we'll be going with that.
To get our three.js piece working in Nuxt, we need to do quite a bit of refactoring, mainly because Nuxt renders its HTML on the server side of things for enhanced performance and SEO. It's a bit of extra work, but by doing so, we'll be able to utilize Nuxt's wonderful routing system that'll load only the exact content we need without ever having to do a full page refresh.
Follow along and let me guide you through the complete refactor process to get three.js working in a real-world project.
2023 UPDATE:
Hello all. Much like others here, I too have had to do some deep diving into this issue. After many hours of trial and error, I finally got this to work properly.
(Start this procedure in /node folder)
Solution – 1
The error comes from the recent Nuxt 3 Release and is being tracked on the create-nuxt-app Github.
Create-nuxt-app is not compatible with Nuxt 3 yet. Therefore, for now, you have to install Nuxt 3 and Tailwind CSS manually:
npx nuxi init <project-name> cd <project-name> npm install npm install @nuxtjs/tailwindcss --save-dev
Now you should be able to run your app as expected:
npm run dev