简体   繁体   中英

laravel 9 + Vue.js 2 And Vite im facing error

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文简体   中文繁体   中英对照 版本,有任何建议请联系yoyou2525@163.com。

I'm new in laravel 9 and vite my old project im using laravel 7 with laravel/UI vue.js 2 for my project now im using laravel 9 and vue.js 2 and vite for my project im developed as my old style in used in laravel 7, but im facing some error IN LARAVEL 9 WITH VITE. ERROR

Cannot set properties of undefined (setting 'id')

MY PROJECT CODE APP.VUE

require('./bootstrap');
import {Vue} from "vue";
import router from "./router";

window.Vue = require('vue');
const app = new Vue({
    el: '#app',
    router,
});

ROUTER

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

// MainComponents
  import Home from "./components/MainComponents/Home.vue";
 
  
const routes = [
    //Admin Login
    {
        path: "/",
        name: "Home",
        component: Home,
    },
  
];

const router = new VueRouter({
    routes,
    mode: "history",
});

export default router;

WELCOME.BLADE.PHP

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HELLO</title>

    @vite('resources/css/app.css')
</head>
<body>
    <div id="app">
        <router-view></router-view>
    </div>
    @vite('resources/js/app.js')
</body>
</html>

WEB.PHP

<?php

use Illuminate\Support\Facades\Route;
 

Route::get('/', function () {
    return view('welcome');
});

Route::get('{any}', function () {
    return view('welcome');
})->where('any', '.*');

COMPONENT

<template>
       <div >
                       MAIN PAGE COMPONENT                         
       </div> 
</template>

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});
1 anwsers

First things first, it is not really practical to use require in vite project, but if you do, you have to either use a plugin or manually work around it. Does the id error comes from the vite file itself or from your code?

6 Vue.js 2 and Laravel

What would be the best method/approach to a large website using Laravel(API) as back-end and Vue.js2 for the front-end. The main question here is how ...

7 Vue.js in Laravel

I am trying to use vue.js with laravel for the first time. In the blade.php file: In the app.js file: In the vue file: I am not getting any ...

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM