Nuxt•2y ago•

79 replies

Nuxt / renders index.vue locally but when deployed via Netlify returns 404

Hi, as the post says I'm having trouble seeing my default page render at

when deployed via Netlify

When I run the project locally everything works as expected

I'm using the

Pages

Pages

directory atm and I made a

index.vue

index.vue

component
My project has

ssr

ssr

set to

false

false

and I'm runnin Nuxt as a SPA

Deployment: https://chirp-shot.netlify.app/

Code is set to private but here's my nuxt config

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/color-mode', 'shadcn-nuxt', '@nuxtjs/supabase'],
  shadcn: {
    /**
     * Prefix for all the imported component
     */
    prefix: '',
    /**
     * Directory that the component lives in.
     * @default "./components/ui"
     */
    componentDir: './components/ui'
  },
  supabase:{
    redirect: false,
  },
  colorMode: {
    preference: 'system', // default value of $colorMode.preference
    fallback: 'light', // fallback value if not system preference found
    classSuffix: ''
  },
  devtools: {
      enabled: true,

      timeline: {
        enabled: true
      }
    },
    ssr: false, // SSR must be turned off
    app: {
      head: {
        meta: [
          { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' }
        ]
      }
    }
})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/color-mode', 'shadcn-nuxt', '@nuxtjs/supabase'],
  shadcn: {
    /**
     * Prefix for all the imported component
     */
    prefix: '',
    /**
     * Directory that the component lives in.
     * @default "./components/ui"
     */
    componentDir: './components/ui'
  },
  supabase:{
    redirect: false,
  },
  colorMode: {
    preference: 'system', // default value of $colorMode.preference
    fallback: 'light', // fallback value if not system preference found
    classSuffix: ''
  },
  devtools: {
      enabled: true,

      timeline: {
        enabled: true
      }
    },
    ssr: false, // SSR must be turned off
    app: {
      head: {
        meta: [
          { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' }
        ]
      }
    }
})

Solution

Incase anyone finds this thread in the future

Do your Nuxt pages or index return 404 even though they are working in your local?

If so, did you rename any page files, specifically

index.vue

index.vue

, from

Page.vue

Page.vue

page.vue

page.vue

at any point?
Double check that git caught the case change

If git did not catch the case change, when the CI runs

git pull

git pull

your page files will still have the old naming, which won't match what you're doing in your

NuxtLink to

NuxtLink to

props

git mv

git mv

and

git mv --force

git mv --force

will be your tools to rename and ensure git will pull them back down correctly in Netlify or Cloudflare CI

Here's a SO post talking about git filenames and case sensitivity: https://stackoverflow.com/a/24979063

https://stackoverflow.com/a/37470090

Stack Overflow

How do you change the capitalization of filenames in Git?

I am trying to rename a file to have different capitalization from what it had before:
git mv src/collision/b2AABB.js src/collision/B2AABB.js
fatal: destination exists, source=src/collision/b2AABB....

Stack Overflow

git fails to detect renaming

One branch (refactoringBranch) had a complete directory restructure. Files were moved chaosly, but the content was preserved.

I tried to merge:
git merge --no-ff -Xrename-threshold=15 -Xpatience -

Jump to solution

Nuxt•2y ago•

79 replies

garrlker

Nuxt / renders index.vue locally but when deployed via Netlify returns 404

Hi, as the post says I'm having trouble seeing my default page render at

when deployed via Netlify

When I run the project locally everything works as expected

I'm using the

Pages

Pages

directory atm and I made a

index.vue

index.vue

component
My project has

ssr

ssr

set to

false

false

and I'm runnin Nuxt as a SPA

Deployment: https://chirp-shot.netlify.app/

Code is set to private but here's my nuxt config

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/color-mode', 'shadcn-nuxt', '@nuxtjs/supabase'],
  shadcn: {
    /**
     * Prefix for all the imported component
     */
    prefix: '',
    /**
     * Directory that the component lives in.
     * @default "./components/ui"
     */
    componentDir: './components/ui'
  },
  supabase:{
    redirect: false,
  },
  colorMode: {
    preference: 'system', // default value of $colorMode.preference
    fallback: 'light', // fallback value if not system preference found
    classSuffix: ''
  },
  devtools: {
      enabled: true,

      timeline: {
        enabled: true
      }
    },
    ssr: false, // SSR must be turned off
    app: {
      head: {
        meta: [
          { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' }
        ]
      }
    }
})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/color-mode', 'shadcn-nuxt', '@nuxtjs/supabase'],
  shadcn: {
    /**
     * Prefix for all the imported component
     */
    prefix: '',
    /**
     * Directory that the component lives in.
     * @default "./components/ui"
     */
    componentDir: './components/ui'
  },
  supabase:{
    redirect: false,
  },
  colorMode: {
    preference: 'system', // default value of $colorMode.preference
    fallback: 'light', // fallback value if not system preference found
    classSuffix: ''
  },
  devtools: {
      enabled: true,

      timeline: {
        enabled: true
      }
    },
    ssr: false, // SSR must be turned off
    app: {
      head: {
        meta: [
          { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' }
        ]
      }
    }
})

Solution

Incase anyone finds this thread in the future

Do your Nuxt pages or index return 404 even though they are working in your local?

If so, did you rename any page files, specifically

index.vue

index.vue

, from

Page.vue

Page.vue

page.vue

page.vue

at any point?
Double check that git caught the case change

If git did not catch the case change, when the CI runs

git pull

git pull

your page files will still have the old naming, which won't match what you're doing in your

NuxtLink to

NuxtLink to

props

git mv

git mv

and

git mv --force

git mv --force

Stack Overflow

How do you change the capitalization of filenames in Git?

Stack Overflow

git fails to detect renaming

One branch (refactoringBranch) had a complete directory restructure. Files were moved chaosly, but the content was preserved.

I tried to merge:
git merge --no-ff -Xrename-threshold=15 -Xpatience -

Jump to solution

Nuxt / renders index.vue locally but when deployed via Netlify returns 404

Nuxt / renders index.vue locally but when deployed via Netlify returns 404

Similar Threads

Similar Threads

Similar Threads