make dynamically class name of html`s body tag #1725

Shaykhnazar · 2023-11-12T06:26:26Z

Shaykhnazar
Nov 12, 2023

Laravel version: ^10.28
Vue.js version: ^3.2.36

HI there!
I want to make dynamically body tag's class name so that inside the component I need to set the class name of the body tag like:

<body class="home">
</body>

Here app.blade.php root view file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8" />
    <meta name="description">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&amp;display=swap&amp;subset=cyrillic" rel="stylesheet">
{{--    <script defer src="{{ asset('js/vendors.d95a6e5831869bd5a585.js') }}"></script>--}}
{{--    <script defer src="{{ asset('js/app.07cd2645b8296d5a0cf4.js') }}"></script>--}}
{{--    <link href="{{ asset('css/vendors.bdf213427bafb9a38bbc.css') }}" rel="stylesheet">--}}
{{--    <link href="{{ asset('css/app.96c411e9f46889d7fdef.css') }}" rel="stylesheet">--}}
    {{-- Custom assets --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/ion.rangeSlider.min.css" integrity="sha256-g7HgoMySZyonuPwHTORf+uGHEeOm7VRI2kfXWXlJnco=" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/ion.rangeSlider.min.js"></script>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @routes
    @inertiaHead
</head>
<body>
    @inertia
</body>
</html>

app.js file:


import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import './assets/app.07cd2645b8296d5a0cf4.js'
import './assets/vendors.d95a6e5831869bd5a585.js'
import Layout from './Layouts/App.vue'


createInertiaApp({
    id: 'app',
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
        let page = pages[`./Pages/${name}.vue`]
        page.default.layout = page.default.layout || Layout
        return page
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
        .use(plugin)
        .mixin({ methods: { route }})
        .mount(el)
    },
});

App.vue main layout component:


<script setup>

</script>

<template>
  <slot/>
</template>

<style scoped>

</style>

Pages/Site/Home.vue component for the home page of the website:

<script setup>
import { Head } from '@inertiajs/vue3';
</script>

<template>
  <Head>
    <title>Main home page</title>
  </Head>
  <body class="home">
    <div class="l-wrap">
       ...........................
    </div>
  </body>
</template>

<style scoped>

</style>

Pages/Site/Catalog.vue component for showing catalog items:

<script setup>
import { Link } from '@inertiajs/vue3'

defineProps({
  categories: Object,
})

</script>

<template>
  <body class="catalog">
    <div class="l-wrap">
      .......................
    </div>
  </body>
</template>

<style scoped>

</style>

package.json:

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^4.3.4",
        "@vue/compiler-sfc": "^3.3.4",
        "axios": "^1.1.2",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-vite-plugin": "^0.8.0",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.67.0",
        "sass-loader": "^13.3.2",
        "unplugin-auto-import": "^0.16.7",
        "unplugin-vue-components": "^0.25.2",
        "vite": "^4.0.0",
        "vue-template-compiler": "^2.7.14"
    },
    "dependencies": {
        "@inertiajs/vue3": "^1.0.11",
        "element-plus": "^2.4.2",
        "vue": "^3.2.36"
    }
}

Or do you have any ideas on how to achieve this dynamic set the name of the body tag in the current version of inertia.js?

YouMixx · 2023-11-12T08:42:30Z

YouMixx
Nov 12, 2023

Привет. У тебя есть доступ к пропсам Inertia не только в vue компонентах, но и blade)

Я покажу тебе пример, как это использовал я, но в моем случае я использовал глобальные пропсы. Но для возвращаемых с обычным запросом все аналогично.

{!! $page['props']['settings']['slotBody'] ?? '' !!}

4 replies

YouMixx Nov 12, 2023

Т.е. если я верно понимаю, на разных страницах ты хочешь использовать разный класс для body.
Возвращай имя класса в пропсах и используй его в своем app.blade.php

Shaykhnazar Nov 12, 2023
Author

Привет. ['settings']['slotBody'] это глобально установлено у тебя по моему?

app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8" />
    <meta name="description">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&amp;display=swap&amp;subset=cyrillic" rel="stylesheet">
    {{-- Custom assets --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/ion.rangeSlider.min.css" integrity="sha256-g7HgoMySZyonuPwHTORf+uGHEeOm7VRI2kfXWXlJnco=" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/ion.rangeSlider.min.js"></script>
    @vite('resources/js/app.js')
    @routes
    @inertiaHead
</head>
<body class="{!! $page['props']['bodyDynamicClassName'] !!}">
    @inertia
{{--    <div id="app" class="l-wrap" data-page="{{ json_encode($page) }}"></div>--}}

</body>
</html>

Home.vue component:

<script setup>
import { Head } from '@inertiajs/vue3';
import { defineProps } from 'vue';

defineProps({
  bodyDynamicClassName: String,
})
</script>

<template>
  <Head>
    <title>Главная</title>
  </Head>
  <div class="l-wrap">
    .................................
   </template>

<style scoped>

</style>

IndexController.php

    public function index(): \Inertia\Response|\Inertia\ResponseFactory
    {
        return inertia('Site/Home', [
            'bodyDynamicClassName' => 'home',
        ]);
    }

В моём случае вот так будет?

Shaykhnazar Nov 12, 2023
Author

Спасибо, теперь работает!

YouMixx Nov 12, 2023

Покажи итоговое решение, дабы помочь людям, которые будут искать аналогичный ответ

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

make dynamically class name of html`s body tag #1725

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

make dynamically class name of html`s body tag #1725

Uh oh!

Shaykhnazar Nov 12, 2023

Replies: 1 comment · 4 replies

Uh oh!

YouMixx Nov 12, 2023

Uh oh!

YouMixx Nov 12, 2023

Uh oh!

Shaykhnazar Nov 12, 2023 Author

Uh oh!

Shaykhnazar Nov 12, 2023 Author

Uh oh!

YouMixx Nov 12, 2023

Shaykhnazar
Nov 12, 2023

Replies: 1 comment 4 replies

YouMixx
Nov 12, 2023

Shaykhnazar Nov 12, 2023
Author

Shaykhnazar Nov 12, 2023
Author