Flowbite не работает с инерционным приложением Laravel
В настоящее время я использую Laravel версии 10 вместе с Vite, Tailwind и Inertia.js для своего проекта. Раньше, когда я не использовал Inertia.js, я мог установить и использовать Flowbite в своем проекте, используя команду «npm install flowbite» и импортируя его с оператором «import 'flowbite';» в моем файле app.js. Однако я столкнулся с проблемой, когда Flowbite больше не работает с тех пор, как я начал использовать Inertia.js в Laravel.
Не могли бы вы помочь мне в решении этой проблемы?
Вот мой код 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/dist/vue.m';
import 'flowbite';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || '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, Ziggy)
.mount(el);
},
progress: {
color: '#4B5563',
},
});
` даже это не работает, если я пытаюсь добавить ссылки cdn в 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', 'Bathinda Chemicals') }}</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" />
<link href = "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap" rel = "stylesheet">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
<!-- Scripts -->
@routes
@vite('resources/js/app.js')
@inertiaHead
<link rel = "stylesheet" href = "https://unpkg.com/[email protected]/dist/flowbite.min.css" />
</head>
{{-- <body class = "font-sans antialiased">
</body> --}}
<body class = "m-0 font-sans antialiased font-normal dark:bg-slate-900 text-base leading-default bg-gray-50 text-slate-500">
<div class = "absolute w-full bg-indigo-500 dark:hidden h-80"></div>
<div class = "min-h-screen bg-gray-100">
@inertia
<script src = "https://unpkg.com/[email protected]/dist/flowbite.js"></script>
</div>
</body>
</html>
`
Я тоже пытался добавить этот код.
`module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
"./node_modules/flowbite/**/*.js"
],
theme: {
extend: {},
},
plugins: [
require('flowbite/plugin')
],
}`
да! база Vue 3
Извините за задержку. Только что опубликовал ответ на то, что я считаю проблемой!
Ответы 1
Я сталкивался с этой проблемой раньше, и в моем случае мне пришлось инициализировать Flowbite в файле Vue с помощью одного из методов жизненного цикла.
Попробуйте это в своем файле Vue:
<script>
import { initFlowbite } from "flowbite";
export default {
mounted() {
initFlowbite(); // Initialize Flowbite on mount of the Vue component
},
}
</script>
При этом все компоненты Flowbite, которые вы будете использовать, будут инициализированы. В моем случае я использовал всплывающие окна, и это не сработало, пока я не использовал функцию initFlowbite().
Подробнее об этом можно прочитать здесь.
Кроме того, приведенный выше пример относится к Vue Options API. Если вы используете Composition API, это можно сделать так:
<script setup>
import { onMounted } from 'vue'
import { initFlowbite } from 'flowbite'
// initialize components based on data attribute selectors
onMounted(() => {
initFlowbite();
})
</script>
Надеюсь это поможет!
Спасибо! я также получил его работу с тем же решением. Спасибо, дорогой!
Рад был помочь! Пожалуйста, примите ответ как решение, если это возможно. Это будет мой первый на StackOverflow :D
Просто чтобы уточнить, для этого проекта вы используете только базовый Vue 3, верно? А не что-то вроде Laravel Splade?