laravel - 如何在带有jetstream-inertia的Laravel 8中安装Vuetify？-6ren

laravel - 如何在带有jetstream-inertia的Laravel 8中安装Vuetify？

转载作者：行者123 更新时间：2023-12-03 15:27:17

26

4

我正在尝试在最新的Laravel版本(8)上安装Vuetify，但我做不到。即使控制台没有显示任何错误，它似乎也不起作用。
那是我的资源/插件/vuetify.js

import Vue from 'vue'
// import Vuetify from 'vuetify'
import Vuetify from 'vuetify/lib'
// import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

我的 webpack.mix.js :

const mix = require('laravel-mix')
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
mix
.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
])
.webpackConfig({
  plugins: [
    new VuetifyLoaderPlugin()
  ],
})
.browserSync('tb8.test');

app.js

import PortalVue from 'portal-vue';

Vue.use(InertiaApp);
Vue.use(InertiaForm);
Vue.use(PortalVue);
Vue.use(vuetify);

const app = document.getElementById('app');

new Vue({
   vuetify,
   render: (h) =>
      h(InertiaApp, {
        props: {
            initialPage: JSON.parse(app.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        },
    }),
}).$mount(app);

和 welcome.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>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

   
        <style>
            body {
                font-family: 'Nunito';
            }
        </style>
    </head>
    <body class="antialiased">
        <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
            @if (Route::has('login'))
                <div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
                    @auth
                        <a href="{{ url('/dashboard') }}" class="text-sm text-gray-700 underline">Dashboard</a>
                    @else
                        <a href="{{ route('login') }}" class="text-sm text-gray-700 underline">Login</a>

                        @if (Route::has('register'))
                            <a href="{{ route('register') }}" class="ml-4 text-sm text-gray-700 underline">Register</a>
                        @endif
                    @endif
                </div>
            @endif

            <v-app>
                <v-main>
                    Hello World
                </v-main>
            </v-app>
        </div>
    </body>
</html>

谁能帮助我找出错误所在？
先感谢您
瓦列里奥

最佳答案

新鲜的Laravel 8.12 + Jetstream +惯性+ VueJs + Vuetify

在/resources/views/app.blade.php中将样式字符串添加到标题中

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">

添加到/resources/js/app.js

import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify)

和
'new Vue({')之后的 vuetify: new Vuetify(),像这样:

require('./bootstrap');

import Vue from 'vue';
import Vuetify from 'vuetify';

import { InertiaApp } from '@inertiajs/inertia-vue';
import { InertiaForm } from 'laravel-jetstream';
import PortalVue from 'portal-vue';

import 'vuetify/dist/vuetify.min.css';

Vue.mixin({ methods: { route } });
Vue.use(InertiaApp);
Vue.use(InertiaForm);
Vue.use(PortalVue);
Vue.use(Vuetify)

const app = document.getElementById('app');

new Vue({
    vuetify: new Vuetify(),
    render: (h) =>
        h(InertiaApp, {
            props: {
                initialPage: JSON.parse(app.dataset.page),
                resolveComponent: (name) => require(`./Pages/${name}`).default,
            },
        }),
}).$mount(app);

之后，例如，您可以创建如下的vuetify组件:
带有Vuetify库中代码的/resources/js/Components/NavigationDrawers.vue

在/resources/js/Pages/Dashboard.vue中初始化此vue组件<navigation-drawers/>有电话import NavigationDrawers from '@/Components/NavigationDrawers'和NavigationDrawers用<script>

例子:

<template>
    <app-layout>
        <navigation-drawers/>

        ....
        ....
    </app-layout>
</template>

<script>
    import NavigationDrawers from '@/Components/NavigationDrawers'

    import AppLayout from '@/Layouts/AppLayout'
    import Welcome from '@/Jetstream/Welcome'

    export default {
        components: {
            AppLayout,
            Welcome,
            NavigationDrawers,
        },
    }
</script>

它可以帮助您设置对项目的验证。
Sass和其他配置可以自行配置。
a screenshot example Navigation Drawer
a screenshot example Navigation Drawer two

关于laravel - 如何在带有jetstream-inertia的Laravel 8中安装Vuetify？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64098183/

26

4

0

文章推荐： r - 如何在R中将字符串拆分为规则间隔？

文章推荐： C#:为什么范围的上限是互斥的？

文章推荐： Android imageview 色调

文章推荐： string - 删除多余的字符串而不循环

javascript - Laravel Inertia 不返回验证错误
Inertia 不返回任何验证错误这是我的 Controller 代码 /** * Store a newly created resource in storage. * * @param
Laravel Jetstream Inertia 共享全局应用数据
我想分享一些我发现的东西，因为那里没有太多信息(我找不到)。带有 Jetstream Inertia 的 Laravel 8 有一些共享对象，例如用户、当前路由……您可以使用 $page 变量在组件
laravel - Inertia.JS 在发布请求后重新加载 Prop
我目前很困惑为什么 Inertia.js 没有重新加载或重新呈现我的页面。我有一个可以填写的表格，一旦提交就会执行: Inertia.post("/ban", ban); 这将重定向到我的 Lara
laravel - 如何将某个模型的关系用 Inertia::render 显示在表格中？
我正在尝试从 Controller 获取模型的关系，以便能够将关系显示为不是 id 而是该 id 的名称或类型或任何可能的类型。在这种情况下，我试图获取与问题相关的信息，它具有什么响应类型(文本、多个
vue.js - Vue3/Inertia 无法解析组件
我有一个使用 VILT 堆栈(Vue、Inertia、Laravel、Tailwind)构建的应用程序。我有一些组件，如 cards可以在应用程序中的任何地方使用。因为我不想每次构建在某些目录中注册组
ios - UIScrollView 与 "inertia"但分页。
我有一个水平 UIScrollView ，我需要分页这个 ScrollView 。但问题是我还需要非分页 UIScrollView 的“惯性”效果.我一直在谷歌搜索和stackoverflowing有
html - 如何将 “inertia” 样式水平滚动应用于 div？
我已经在 wikiprop.org 上成功实现了水平滚动但是the example I followed具有这种惯性/动量效应，您可以在其中滑动，它会继续滚动并逐渐减慢速度——这在网络上很常见。为什
Laravel、Inertia.js 和 vue，检查用户是否登录
我正在使用 laravel 和 inertia.js 来实现我的项目。在我的导航栏中，如果用户已登录，我想显示带有一些用户详细信息的 div 元素。如果用户未登录，则不应显示 div。我已经尝试过了，
Python/Pygame : 2d angular momentum/inertia
我的第一个 Python 程序遇到了障碍，我认为我没有足够的知识来解决自己的问题。这是一个二维表面上的可控宇宙飞船，我想添加动量/惯性我有了它，这样当发动机停止时，船就能继续按照以前的矢量行驶。然而
c# - Xna 4 Model Rotation with inertia 在变量更新时无法按预期工作
我正在尝试使用键盘旋转具有惯性阻尼的模型。该代码在固定时间步长下运行良好，但在可变更新频率下表现不同。更新方法: protected override void Update(GameTime ga
php - Laravel v8.x - Jetstream Inertia，419 页在生产时过期
enter image description here 生产时出现页面过期 419。我已经尝试运行 php artisan clear:cache、php artisan config:cache、
Laravel + Inertia + Vue.js 复制 App_URL 到 url
我已经在 Laravel 8 Inertia 和 Vue.js 项目上工作了几个星期，没有遇到这个问题。我的文件位于 C:\Users[my_user]\laravel。我在打开 127.0.0.1:
Laravel Fortify 返回 Inertia::render() 而不是 Blade View
我目前正在使用 vue 构建一个 SPA 并安装了 jetstream(与 fortify 一起提供)并使用inertiajs 来获取我的 vue 组件。有没有办法使用inertia::render(
laravel - 使用 Vue.Js/Inertia.js 和 Laravel 对结果进行分页
我正在尝试在 Vue.Js 中对来自 Laravel 的数据进行分页。我也在使用 Inertia.js。在我的 Laravel Controller 中我有: $data['particip
laravel - 使用 Vue.Js/Inertia.js 和 Laravel 对结果进行分页
我正在尝试在 Vue.Js 中对来自 Laravel 的数据进行分页。我也在使用 Inertia.js。在我的 Laravel Controller 中我有: $data['particip
ios - 移动版 Safari : inertia scrolling on body AND minimal UI behavior?
这个问题需要一些解释，所以请耐心等待。与流行的看法相反，默认情况下，Mobile Safari 中的网页不启用惯性滚动(非常流畅的 60fps 滚动)。由于它在用户体验方面产生了天壤之别，因此在专门
laravel - 在 Inertia.js Vue 文件中访问 Laravel 的 .env 变量
我从 Inertia Laravel 示例开始 https://github.com/drehimself/inertia-example 这只不过是 Laravel 和 Vue 在一个整体代码库中，
laravel - 类型错误 : Cannot read properties of null (reading 'dataset' ) in Laravel Jetstream-inertia
这个错误突然出现。我尝试重新安装 npm 软件包，但它不起作用。但是当我使用相同的 npm 包创建一个新的 jetstream-inertia 项目时，它就会起作用。有帮助吗？在 Chrome 上测试
laravel - 为 Vue 使用 2 个不同的 Blade 根模板，以及 Laravel 8 和 Inertia？
所以我正在开发一个带有 Inertia 和 Vue 的 Laravel 8 应用程序。想法是大部分页面都是 Laravel + Blade(适合 SEO、快速加载等)，但是对于需要大量用户交互的选定
Laravel 8 (Inertia js) - 获取 Vue 错误 'app.js:30559 [Vue warn]: Error in created hook: "错误 : Cannot find module. ..'
我已经设置了一个使用 Jetstream(惯性 js 堆栈)的 Laravel 8 安装。 Jetstream 提供的所有 View 都正常工作。问题是当我创建一个呈现新 Vue 模板的新路由时，我

首页

博学

6Ren·AI

商城

laravel - 如何在带有jetstream-inertia的Laravel 8中安装Vuetify？