Vue + Backpack V6

[miquelangeld]

Hi! I'm desperate

I have some views in my project which use Vue.Js

in V5 I load app.js like that in the blade files where I need to load vue components:

@extends(backpack_view('blank'))

@section('content')
    <div id="app">
        <email-capture-back></email-capture-back>
    </div>
@endsection

@Vite(config('backpack.base.vite_scripts_vue'))

In my base.php:

'vite_scripts_vue' => [ // resource file_path
'resources/js/app.js',
],

Using V5 theme all works perfectly

But since i migrated to V6 and started to use theme-tabler, when I load app.js the theme went broke, the menu dropdowns stop to work, etc.

even without load the component, just a out-of-the-box app.js without any component the problem persists.

If I just block with devtools the vue.js file that load vite, the theme works ok.

Just by loading the main vue library with , the theme stops working. If I load vue3 using the scripst node in ui.php the theme works fine:

'scripts' => [
// 'js/example.js',
'https://unpkg.com/[email protected]/dist/vue.min.js',
// 'https://unpkg.com/react@16/umd/react.production.min.js',
// 'https://unpkg.com/react-dom@16/umd/react-dom.production.min.js',
],

my problem is that if I use vite to load app.js vite also load his own vue.js I tried to use @basset(resource_path('resources/js/app.js')) but it doesn't work either, it doesn't load the library

PHP VERSION:

PHP 8.1.21 (cli) (built: Jul 8 2023 07:10:19) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.1.21, Copyright (c) Zend Technologies
with Zend OPcache v8.1.21, Copyright (c), by Zend Technologies
with Xdebug v3.2.1, Copyright (c) 2002-2023, by Derick Rethans
LARAVEL VERSION:

10.16.1.0
BACKPACK PACKAGE VERSIONS:

backpack/backupmanager: v5.0.0
backpack/basset: 1.0.2
backpack/crud: 6.1.1
backpack/devtools: 2.0.3
backpack/editable-columns: 3.0.2
backpack/generators: v4.0.2
backpack/logmanager: v5.0.0
backpack/permissionmanager: 7.0.0
backpack/pro: 2.0.9
backpack/settings: 3.1.0
backpack/theme-tabler: 1.0.6

[msoler75]

I'm near the same situation. I would want to use some components in Vue 3 and I can't make them work at all, and all examples I find are in Vue 2, and previous Backpack versions.

[miquelangeld]

In my case the problem is that when I load the components which works ok, the theme stops to work correctly i assume some conflict with js. I need to make this works so badly.

[pxpm]

Hello @miquelangeld why don't you recompile the vite assets to don't have the vue included ?

That comes by default with Laravel ? We don't use it anywhere.

[miquelangeld]

hi @pxpm I think the problem is that when i load the vue libraries the bootstrap.js it's loaded twice (one for tabler and another one with vue) and that's seems the problem. Still trying to figure out how to solve it. Meanwhile I upgraded to V6 but with CoreUI

[karandatwani92]

Hey @miquelangeld if you are still facing the same issue let us know about it.
If it's solved, You can comment on how you solved it. This would become help for others. Thanks

[jcastroa87]

Hello,

We haven’t heard back from you in a while, so we’re closing this issue for now. If you still need assistance, please don’t hesitate to reopen the issue or create a new one.

Thank you, and take care!

Cheers.