CODEWITHSUNDEEP
vue.jsnuxt.jsvue-routerstrapi
Antoni
Antoni

Reputation: 1433

Nuxt hard refreshing the whole app on each navigation

I build a blog with strapi and nuxt js. You can create a URL at the backend and the frontend loads dynamically the current data from the URL. When I try to load a page I'm getting to prod a 404 error in my network tab, but the data will be loaded.

Example page → https://alphaoptik.net/meine-kamera

My nuxt config looks like:

export default {
    ssr: true, // default value
    // Global page headers: https://go.nuxtjs.dev/config-head

    generate: {
        fallback: true
    },

    loadingIndicator: {
        name: 'folding-cube',
        color: '#E2C994'
    },

    head: {
        title: 'PageSite',
        htmlAttrs: {
            lang: 'de'
        },
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: '' }
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
    },

    // Global CSS: https://go.nuxtjs.dev/config-css
    css: [],

    // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
    plugins: [
        { src: '~/plugins/vue-unicons', mode: 'client' }
    ],

    // Auto import components: https://go.nuxtjs.dev/config-components
    components: true,

    // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
    buildModules: [
        // https://go.nuxtjs.dev/typescript
        '@nuxt/typescript-build',
        // https://go.nuxtjs.dev/tailwindcss
        '@nuxtjs/tailwindcss'
    ],

    // Modules: https://go.nuxtjs.dev/config-modules
    modules: [
        '@nuxtjs/apollo',
        '@nuxtjs/cloudinary'
    ],
    
    target: 'static',

    apollo: {
        clientConfigs: {
            default: '@/apollo/config/config.js'
        }
    },

    cloudinary: {
        cloudName: 'cloudName'
    },

    env: {
        strapiBaseUri: process.env.API_URL || "http://localhost:1337"
    },

    // Build Configuration: https://go.nuxtjs.dev/config-build
    build: {}
}

Upvotes: 0

Views: 1491

Answers (1)

kissu
kissu

Reputation: 46706

As OP said, the answer was to replace all the <a> tags by <nuxt-link>s (+ SSR and apollo prefetch in his case).

Now, this is not doing any hard refresh and working properly.

Upvotes: 1

Related Questions