How to Load the site Home page, Click a link to open different page, and then click a link back to home page without a 409 reload #1891

Rubrasum · 2024-06-10T03:51:58Z

Rubrasum
Jun 10, 2024

Version:

@inertiajs/vue3 version: 1.1.0

Describe the problem:

I am having one hell of a time preventing a reload on my basic blog.

This blog is a pretty simply Laravel 10 blog site (VITE). I upgraded it to Laravel 11 and add Vue/Inertia pretty recently. Here's the repo, should be up to date for purposes of this question (Make sure you have the right branch - /Rubrasum/setup/update_to_use_vue)

Video of what I'm trying to accomplish
https://github.com/inertiajs/inertia/assets/60015291/1ff99cb7-e8ea-451a-97ba-5d60f3b903d5

Now here you can see the problem in action. I would basically like to click a Link in the Home page, then be able to click back to the home page without a full reload. After playing with this for over two days I have determined it must be the version of the page that is causing this to return 409 and refresh. I have tried with just about every orientation of data and checked the returning data, and even when it perfectly matches I am getting this error. However, if I set a Link to the Home page from the home page, I can check console log onUpdated and see that it was updated successfully.

I have also checked these places for an answer but with little success:

#1691

(Apologies, I just found this one so I'll try it tomorrow morning, and I am using Ziggy) #1235 (comment)
#1330 (which references https://laracasts.com/discuss/channels/general-discussion/what-is-a-409-error-and-how-can-i-fix-it?page=1&replyId=845016) and replaced Mix with Vite manifest.
inertiajs/inertia-laravel#76 - and here

Relevant files.

vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js', 'resources/css/app.css'], // Ensure CSS is included
            ssr: 'resources/js/ssr.js', // Specify SSR entry point
            refresh: [
                'resources/views/**/*.blade.php',
                'resources/js/**/*.vue',
            ],
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            '@': '/resources/js', // Use alias for cleaner imports
        },
    },
});

Here's my app.js

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from 'ziggy-js';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .mount(el);
    },
    progress: {
        delay: 0,
        color: import.meta.env.THEME_COLOR || '#11A',
        // Whether to include the default NProgress styles...
        includeCSS: true,

        // Whether the NProgress spinner will be shown...
        showSpinner: true,
    },
});

app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title inertia>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @routes
        @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
        @inertiaHead
    </head>
    <body style="font-family: Open Sans, sans-serif">
        @inertia
    </body>
</html>

The remaining bits are just the Link on the Home page, which is nested inside a couple other elements:

  <Link :href="`/post/${post.slug}`" preserve-state >
           <h1 class="text-white text-3xl md:text-4xl font-bold">{{ post.title }}</h1>
</Link>

And the link back to home is here. It's not nested into any components just straight on the Post.vue page

<Link :href="`/`" preserve-state @click.prevent="goHome" >
        <h1 class="text-white text-4xl font-bold mb-10">{{ post.title }}</h1>
</Link>

// And it calls this function because I've basically been trying anything. 
const goHome = () => {
    router.get('/', {}, { preserveState: true })
}

Steps to reproduce:

I have not tested a fresh deploy in a while but that Github link above is public
Nothing in particular is special about all this so you can spin up any Laravel Vue3 Inertia with Vite, Tailwind, using Sail, with this compose:

services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.2
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.2/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on:
            - mysql
            - redis
            - meilisearch
            - mailpit
            - selenium
            - phpmyadmin # new line

    mysql:
        image: 'mysql/mysql-server:8.0'
        ports:
            - '${FORWARD_DB_PORT:-3306}:3306'
        environment:
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ROOT_HOST: '%'
            MYSQL_DATABASE: '${DB_DATABASE}'
            MYSQL_USER: '${DB_USERNAME}'
            MYSQL_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ALLOW_EMPTY_PASSWORD: 1
        volumes:
            - 'sail-mysql:/var/lib/mysql'
            - './vendor/laravel/sail/database/mysql/create-testing-database.sh:/docker-entrypoint-initdb.d/10-create-testing-database.sh'
            - './database/joebeze.sql:/docker-entrypoint-initdb.d/myapp.sql' # Add this line to copy the database file to the container
        networks:
            - sail
        healthcheck:
            test:
                - CMD
                - mysqladmin
                - ping
                - '-p${DB_PASSWORD}'
            retries: 3
            timeout: 5s
    redis:
        image: 'redis:alpine'
        ports:
            - '${FORWARD_REDIS_PORT:-6379}:6379'
        volumes:
            - 'sail-redis:/data'
        networks:
            - sail
        healthcheck:
            test:
                - CMD
                - redis-cli
                - ping
            retries: 3
            timeout: 5s

    meilisearch:
        image: 'getmeili/meilisearch:latest'
        ports:
            - '${FORWARD_MEILISEARCH_PORT:-7700}:7700'
        volumes:
            - 'sail-meilisearch:/meili_data'
        networks:
            - sail
        healthcheck:
            test:
                - CMD
                - wget
                - '--no-verbose'
                - '--spider'
                - 'http://localhost:7700/health'
            retries: 3
            timeout: 5s

    mailpit:
        image: 'axllent/mailpit:latest'
        ports:
            - '${FORWARD_MAILPIT_PORT:-1025}:1025'
            - '${FORWARD_MAILPIT_DASHBOARD_PORT:-8025}:8025'
        networks:
            - sail

    selenium:
        image: selenium/standalone-chrome
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        volumes:
            - '/dev/shm:/dev/shm'
        networks:
            - sail
    phpmyadmin:
        image: phpmyadmin/phpmyadmin
        ports:
            - '${FORWARD_PHPMYADMIN_PORT:-8080}:80'
        environment:
            PMA_HOST: mysql
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
        depends_on:
            - mysql
        networks:
            - sail
networks:
    sail:
        driver: bridge
volumes:
    sail-mysql:
        driver: local
    sail-redis:
        driver: local
    sail-meilisearch:
        driver: local

Answered by RobertBoes

Jun 10, 2024

You're using two different versions of the Inertia JS library, namely @inertiajs/inertia-vue3 and @inertiajs/vue3. The first is <1.0, the latter is 1.x. Using both would result in conflicts. So, remove @inertiajs/inertia-vue3 and use the imports from @inertiajs/vue3, such as import { Link } from '@inertiajs/vue3'

You'd also want to remove @inertiajs/server and instead use import createServer from '@inertiajs/vue3/server'

View full answer

RobertBoes · 2024-06-10T07:37:27Z

RobertBoes
Jun 10, 2024

You're using two different versions of the Inertia JS library, namely @inertiajs/inertia-vue3 and @inertiajs/vue3. The first is <1.0, the latter is 1.x. Using both would result in conflicts. So, remove @inertiajs/inertia-vue3 and use the imports from @inertiajs/vue3, such as import { Link } from '@inertiajs/vue3'

You'd also want to remove @inertiajs/server and instead use import createServer from '@inertiajs/vue3/server'

1 reply

Rubrasum Jun 10, 2024
Author

Thank you much Robert. I had seen that change and applied it only sporadically on the Links.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to Load the site Home page, Click a link to open different page, and then click a link back to home page without a 409 reload #1891

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How to Load the site Home page, Click a link to open different page, and then click a link back to home page without a 409 reload #1891

Rubrasum Jun 10, 2024

Version:

Describe the problem:

Steps to reproduce:

Replies: 1 comment · 1 reply

RobertBoes Jun 10, 2024

Rubrasum Jun 10, 2024 Author

Rubrasum
Jun 10, 2024

Replies: 1 comment 1 reply

RobertBoes
Jun 10, 2024

Rubrasum Jun 10, 2024
Author