how to prerender or ssr vue application?

Question

I'm working on lagacy project(laravel vue webpack.mix), which has a very poorly built architecture and no Vue logic. Now I have a task - to set up an SEO audit for normal indexing by the search system`s.

I don’t know anything about this topic and found two options

1. server-sider-rendering - I tried to use the inertia.js library, but I had an error like 'undefined variable $page' (maybe someone knows something about this). Well, I decided to move away from this idea
2. prerender - I found a topic in the vue docs about prerender-spa-plugin, but again I had problems. everything seems to be connected, but pre-rendering does not work I still have, if I use curl 'address', the browser returns instead of html markup, which, as I understand it, prevents SEO robots from indexing the page properly and in my dist directory no html files, only js and css enter image description here

my webpack.mix.js file

const mix = require("laravel-mix");
var path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin-next')



/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.setPublicPath('dist');

mix.js("resources/assets/js/app.js", "public/assets/js")
    .webpackConfig({
        plugins: [
            new PrerenderSPAPlugin({
                // Required - The path to the webpack-outputted app to prerender.
                staticDir: path.join(__dirname, 'dist'),
                // Required - Routes to render.
                routes: ['/'],
            })
        ],
    })
    .js("resources/assets/js/connect-vue.js", "public/assets/js")
    .js("resources/assets/js/connect-footer-vue.js", "public/assets/js")
    .vue()
    .sourceMaps();
mix.js("resources/assets/js/index.js", "public/assets/js")
    .webpackConfig({
        plugins: [
            new PrerenderSPAPlugin({
                // Required - The path to the webpack-outputted app to prerender.
                staticDir: path.join(__dirname, 'dist'),
                // Required - Routes to render.
                routes: ['/'],
            })
        ],
    })
    .js("resources/assets/js/front/gallery/cart.js", "public/assets/js/front")
    .js("resources/assets/js/email/send-email.js", "public/assets/js/front")
    .js("resources/assets/js/front/user/user-info.js", "public/assets/js/front")
    .js("resources/assets/js/front/user/orders.js", "public/assets/js/front")
    .js(
        "resources/assets/js/front/user/orderModels.js",
        "public/assets/js/front"
    )
    .js(
        "resources/assets/js/front/user/user-address.js",
        "public/assets/js/front"
    )
    .js(
        "resources/assets/js/front/gallery/gallery.js",
        "public/assets/js/front"
    );
mix.sass("resources/assets/sass/app.scss", "public/assets/css").sourceMaps();
mix.sass("resources/assets/sass/app-admin.scss", "public/assets/css").sass(
    "resources/assets/sass/front/wishlist.scss",
    "public/assets/css"
);

//User scss
mix.sass("resources/sass/app.scss", "public/css")
    .sass(
        "resources/assets/sass/front/dashboard.scss",
        "public/assets/css/front"
    )
    .sass("resources/assets/sass/front/login.scss", "public/assets/css/front")
    .sass(
        "resources/assets/sass/front/contacts.scss",
        "public/assets/css/front"
    )
    .sass(
        "resources/assets/sass/front/user-info.scss",
        "public/assets/css/front"
    )
    .sass(
        "resources/assets/sass/front/user-orders.scss",
        "public/assets/css/front"
    )
    .sass("resources/assets/sass/front/gallery.scss", "public/assets/css/front")
    .sass("resources/assets/sass/front/cart.scss", "public/assets/css/front")
    .sass("resources/assets/sass/front/home.scss", "public/assets/css/front")
    .sass("resources/assets/sass/front/footer.scss", "public/assets/css/front")
    .sass(
        "resources/assets/sass/front/client-model.scss",
        "public/assets/css/front"
    )
    .sass(
        "resources/assets/sass/front/card-model.scss",
        "public/assets/css/front"
    )
    .sass(
        "resources/assets/sass/front/user-model.scss",
        "public/assets/css/front"
    )
    .sass(
        "resources/assets/sass/front/submit-material.scss",
        "public/assets/css/front"
    )
    .sass("resources/assets/sass/front/rtl.scss", "public/assets/css/front");

//Admin scss
mix.sass("resources/assets/sass/admin/style.scss", "public/assets/css/admin")
    .sass("resources/assets/sass/admin/order.scss", "public/assets/css/admin")
    .sass(
        "resources/assets/sass/admin/material.scss",
        "public/assets/css/admin"
    );

//Admin Js
mix.js("resources/assets/js/app-admin.js", "public/assets/js").sourceMaps();
mix.js("resources/assets/js/admin/dashboard.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/order.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/model.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/offer.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/material.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/client-model.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/cura-crush.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/profile.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/setting.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/user.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/request.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/promotion-code.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/coupon.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/tag.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/review.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/faq.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/payment.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/cms.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/sections.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/admin.js", "public/assets/js/admin")
    .js("resources/assets/js/admin/analitics.js", "public/assets/js/admin")
    .js(
        "resources/assets/js/admin/create-model-field.js",
        "public/assets/js/admin"
    )
    .js(
        "resources/assets/js/admin/edit-model-field.js",
        "public/assets/js/admin"
    );
if (mix.inProduction()) {
    mix.version();
}

I suspect this is due to the terrible structure of Vue enter image description here 1 page = 1 vue component in blade.php file

example

@extends('layouts.app')

@section('page-title', 'Gallery')

@push('styles')
    <link href="{{ asset('assets/css/front/cart.css?v=' . config('app.version')) }}" rel="stylesheet">
@endpush

@push('scripts')

@endpush

@section('content')
    <gallery-component></gallery-component>
{{--    <div class="new-pagination">{{ $models->links("pagination::bootstrap-4") }}</div>--}}

    @include('front.gallery.modals.modal_cart')

    <script>
        let userId = {!! auth()->user() ? auth()->id() : 0  !!},
            categories = {!! json_encode($categories) !!},
            autorizetion = {!! auth()->user() ? 0 : 1  !!}

    </script>

@endsection

I think I just don’t understand something and am missing something basic. I will be very glad for advice and help.

i tried to setup server side rendering with inertia.js, but i had a errors with it and now im trying to setup prerender vue with prerender-spa-plugin, but i dont know how i can recognize, if prerender working))