CODEWITHSUNDEEP
jsondatabasevuejs3laravel-11laravel-mix-vue3
Jon
Jon

Reputation: 1

laravel and vue json data in id=app data-page= all json form database in html code is showing up

I am building Laravel app with vue on Laravel sail (docker plugin for Laravel) + breeze I've built it with Laravel bootcamp tutorial, vue plugin.

So the trouble is that data form server database is visible in html structure, in json format, in id=app page-data json data in html

How can I move this data to browser storage, so it doesn't show up in html?

I've tried building "npm run build" but the issue persists and I'm thinking maybe I need to restructure how the data is being handled to browsers storage, sort of reworking things, just confused.

again forwardly saying, Thank you

config

vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app/**/*.vue', 'resources/js/components/**/*.vue'],
        }),
        vue(),
    ],
    resolve: {
        alias: {
            ziggy: path.resolve(__dirname, 'vendor/tightenco/ziggy/dist/vue.m'),
        },
    },
});

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 '../../vendor/tightenco/ziggy';

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

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => {
        const page = resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue'));
        console.log(`Resolving component: ./Pages/${name}.vue`);  // Debugging line
        return page.then(module => {
            console.log(`Component ${name} loaded successfully.`);  // Debugging successful loading
            return module;
        });
    },
    setup({ el, App, props, plugin }) {
        const vueApp = createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .mount(el);
        return vueApp;
    },
    progress: {
        color: '#4B5563',
    },
});

bootstrap.js:

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true,
    encrypted: true
});

console.log('Echo initialized:', window.Echo);

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">

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

        <!-- CSRF -->
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <!-- Fonts -->
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
        <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
        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>

Upvotes: 0

Views: 23

Answers (0)

Related Questions