"Nuxt - Page does not load properly after executing "yarn generate""

Question

I have a simple nuxt application with a page located under the following directory structure:

pages
   callback
       index.vue

This application was built using "universal" mode. My problem is that when I run the application locally (i.e. yarn dev) the callback page displays perfectly and works fine. However, when I run yarn generate and then serve the dist folder, the page has some slight visual errors. There are no console errors or network errors, but the display is somewhat patchy. The problem is: a specific icon (hamburger menu) doesn't load, and the dropdown/select component doesn't initialize properly and show its placeholder until clicked.

These are components that have been built and work fine elsewhere in the application, but on the generated page, they don't work.

I have devtools enabled on the build output and the only difference I am able to see between the version running locally and the generated version is that when I navigate to the callback route the generated output does not seem to receive the vue devtools "Active" flag in .

I thought this was weird and read about navigable links and hidden pages (since this page is not currently linked to from anywhere on the site) and tried many things but nothing worked. The closest I've come is to create a NuxtLink element on the homepage that links to the callback route. When I do this, after clicking the link, the page works as expected and the active flag is set in the routing tab of devtools. But if I navigate to it via the URL bar it doesn't work.

I have read the documentation of nuxt and vue router in detail but can't seem to find a solution to the problem.

Answer 1

yarn generate is used to deploy a static site while your target is set to universal. Run yarn build and yarn start to deploy in universal mode.

See documentation here.