nuxt / create-nuxt-app

Create Nuxt.js App in seconds.
MIT License
3.48k stars 430 forks source link

Vuetify hangs on custom error page in statically generated project #455

Open Strahinja opened 4 years ago

Strahinja commented 4 years ago

Steps to reproduce

  1. yarn create nuxt-app errtest

    ✨  Generating Nuxt.js project in errtest
    ? Project name errtest
    ? Project description Nuxt error page test
    ? Author name Страхиња Радић
    ? Choose programming language JavaScript
    ? Choose the package manager Yarn
    ? Choose UI framework Vuetify.js
    ? Choose custom server framework None (Recommended)
    ? Choose Nuxt.js modules Axios, DotEnv
    ? Choose linting tools ESLint, StyleLint
    ? Choose test framework None
    ? Choose rendering mode Universal (SSR)
    ? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
    yarn run v1.22.4
    $ eslint --ext .js,.vue --ignore-path .gitignore . --fix
    Done in 2.60s.
    
    �  Successfully created project errtest
    
      To get started:
    
           cd errtest
           yarn dev
    
     To build & start for production:
    
           cd errtest
           yarn build
           yarn start
    
    Done in 279.09s.
  2. cd errtest

  3. Edit nuxt.config.js (add after build section):

    generate: {
      fallback: true,
    },
  4. I used Apache local virtual server named http://errtest serving errtest/dist folder as document root. Edit static/.htaccess:

    <IfModule mod_rewrite.c>
      ErrorDocument 404 /404.html
      RewriteEngine On
    
      RewriteBase /
      RewriteRule ^index\.html$ - [L]
    
      RewriteRule \.html$ - [L]
    
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule . /index.html [L]
    </IfModule>
  5. yarn generate

  6. Navigate to http://errtest (works), then for example to http://errtest/nonexistant. Custom error page is shown with the text "404 Not Found", but clicking any nuxt-link, such as the bottom one titled "Home page", or the "Inspire" menu item, seems to somehow corrupt the Vue internal state. Navigation menu can be opened, but any nuxt-link such as the "Inspire" menu item doesn't display the inspire.vue page, even though URL seems to be updated to http://errtest/inspire.

Strahinja commented 4 years ago

I was able to confirm this is specifically an issue of create-nuxt-app. I made a test app in Codesandbox.io by forking the codesandbox-nuxt repository and set it up to use @nuxtjs/vuetify. After generating and deploying to Netlify, the error page on the website doesn't have the issue.