the idea is to use vue component inside file blade but i got this error
Failed to mount component: template or render function not defined.
this my importation in app.js
Vue.component('Notification' ,require('./components/Notification.vue'));
this my component code
<template>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="fas fa-bell"></i> <span class="badge badge-light">{{unreads.length}}</span>
<span class="badge badge-warning navbar-badge"></span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<notification-item> </notification-item>
</div>
</li>
</template>
<script>
export default {
props :['unreads','userid'],
mounted() {
Echo.private('App.User.'+ this.userid)
.notification((notification) => {
console.log(notification);
});
}
}
</script>
and finally this my code in home.blade.php
<Notification :userid="{{auth()->id()}}" :unreads="{{auth()->user()->unreadNotifications}}"> </Notification>
someone help me please
Compile vuejs files via npm run dev and make sure that you use the correct binding for userid and include app.js into scripts.
Related
Hi I have read that this question is already answered but that answer did not work to me.. I have my code like this:
/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/login',
name: 'login',
component: () => import('../views/LoginView.vue')
}
]
const router = createRouter({
history: createWebHistory('/laravel-vue3/'),
routes
})
export default router
My app.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
createApp(App).use(router).mount('#app');
My .htaccess works without public in the path.
I am working in localhost so I go http://localhost/laravel-vue3 to go to the website
BUT it does not work.
I have my router view in App.vue like this:
<template>
<div>
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="">
Portal Conecta Mayor
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav me-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ms-auto">
<!-- Authentication Links -->
<li class="nav-item">
<router-link class="nav-link" to="/login">Login</router-link>
</li>
<li class="nav-item">
<a class="nav-link" href="">Register</a>
</li>
</ul>
</div>
<router-view />
</div>
</nav>
</div>
</template>
<script>
export default {
}
</script>
When I go to http:localhost/larave-vue3 it opens my App.vue and it works BUT I receive this message:
[Vue Router warn]: No match found for location with path "/laravel-vue3/"
I added that to history: createWebHistory and it still does not work.
When I click login it displays this error:
Look the error
How can I fix the router problem in vue 3 with Laravel 8? Thanks
I'm having a trouble on how can I view the toggle when I click the button export in Laravel vue Spa. The problem is when I click the button export, the toggle is not showing, unlike I have example image below that should view the toggle when clicks. I already load all of my JavaScript file in my public views.
I think this is one of disadvantage when using SPA in laravue. One of the problem I observed in SPA, it loads first all the element js file in the public and when I go to SPA vue the js file did not rendered, is there any solution for this? It would be great if anybody could figure out, thank you so much in advance!.
Expected output , should view the toggle
vue template
<div class="card-toolbar">
<div class="dropdown dropdown-inline mr-2">
<button type="button" class="btn btn-light-primary font-weight-bolder dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="svg-icon svg-icon-md">
</span>Export</button> //export button here
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<ul class="navi flex-column navi-hover py-2">
<li class="navi-header font-weight-bolder text-uppercase font-size-sm text-primary pb-2">Choose an option:</li>
<li class="navi-item">
<a href="#" class="navi-link">
<span class="navi-icon">
<i class="la la-print"></i>
</span>
<span class="navi-text">Print</span>
</a>
</li>
<li class="navi-item">
<a href="#" class="navi-link">
<span class="navi-icon">
<i class="la la-copy"></i>
</span>
<span class="navi-text">Copy</span>
</a>
</li>
<li class="navi-item">
<a href="#" class="navi-link">
<span class="navi-icon">
<i class="la la-file-excel-o"></i>
</span>
<span class="navi-text">Excel</span>
</a>
</li>
<li class="navi-item">
<a href="#" class="navi-link">
<span class="navi-icon">
<i class="la la-file-text-o"></i>
</span>
<span class="navi-text">CSV</span>
</a>
</li>
<li class="navi-item">
<a href="#" class="navi-link">
<span class="navi-icon">
<i class="la la-file-pdf-o"></i>
</span>
<span class="navi-text">PDF</span>
</a>
</li>
</ul>
</div>
</div>
</div>
My webpack.mix.js
const mix = require('laravel-mix');
const path = require('path');
mix.webpackConfig({
resolve: {
alias: {
'^public': path.resolve(__dirname, 'public'),
'^resources': path.resolve(__dirname, 'resources'),
'^lang': path.resolve(__dirname, 'resources/js/lang'),
'^modules': path.resolve(__dirname, 'Modules'),
}
}
});
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css');
I have a problem attaching blade content in the adminLTE dashboard starter package. I am also using vue js components and they are displayed well using router-link. Am managing users with pure laravel without vue Js and I want to include that blade in the same dashboard. Is this possible?
my code:
<li class="nav-item">
<router-link to="/customer" class="nav-link">
<i class="nav-icon fas fa-user text-orange"></i>
<p>
Locations
</p>
</router-link>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-cog text-green"></i>
<p>
Management
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{route('usertab')}}" class="nav-link">// I want to include it here
<i class="fas fa-users nav-icon text-teal "></i>
<p>Usersx</p>
</a>
</li>
</ul>
I have added this to content section.
<div class="content-wrapper">
<div class="container-fluid">
<router-view></router-view>
#if(Request::is('/usertab')) //but this is not working
#yield('content')
#endif
</div>
</div>
My router link
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let routes = [
{ path: '/userbio', component: require('./components/UserBioComponent.vue').default},
{ path: '/users', component: require('./components/UsersComponent.vue').default},
{ path: '/customer', component: require('./components/LocationComponent.vue').default},
]
and my blade web route
Route::get('usertab','AdminController#getuserall')->name('usertab');
Any idea to this
I am new to Laravel Nova ... I just installed optimistdigital/nova-menu-builder in order to generate menus in a more efficient way then whats generated by nova. My menu structure is very complex and needs more control. Anyway, I installed the package and created a menu. I am at the point where I would like to load it in the sidebar but can't figure out how that works ...
in the navigation.blade.php file I added:
#menu("admin")
Where admin is supposed to be the menu slug
After a refresh, nothing happened. So I tried something more basic. I removed the #menu and added "hello world" instead. It did not appear ... So I ran the following commands:
php artisan config:clear
php artisan cache:clear
php artisan nova:publish
All 3 were executed without any errors. But the sidebar still did not show my hello world.
So my question is the following. How can I reflect my changes in the blade views? And is #menu("") the right way to use the optimistdigital/nova-menu-builder package? The documentation seems to be missing the part on how to use the menus you create... Thx in advance!
Here's my layout page
<router-link exact tag="h3"
:to="{
name: 'dashboard.custom',
params: {
name: 'main'
}
}"
class="cursor-pointer flex items-center font-normal dim text-white mb-8 text-base no-underline">
<svg>[Long SVG string]</svg>
<span class="text-white sidebar-label">{{ __('Dashboard') }}</span>
</router-link>
hello world
#menu("admin")
#if (\Laravel\Nova\Nova::availableDashboards(request()))
<ul class="list-reset mb-8">
#foreach (\Laravel\Nova\Nova::availableDashboards(request()) as $dashboard)
<li class="leading-wide mb-4 ml-8 text-sm">
<router-link :to='{
name: "dashboard.custom",
params: {
name: "{{ $dashboard::uriKey() }}",
},
query: #json($dashboard->meta()),
}'
exact
class="text-white no-underline dim">
{{ $dashboard::label() }}
</router-link>
</li>
#endforeach
</ul>
#endif
Thx to leek, I was able to find how to retrieve the menus and build on that.
So my first problem was that I was editing the wrong file. You need to do the following first:
copy the file in nova/resources/views/layout.blade.php and put it in
/resources/views/vendor/nova.
After doing this your changes will reflect correctly. I moved all the files in the nova view folder while I was at it.
In side the newly created /resources/views/vendor/nova/layout.blade.php file replace this code:
#foreach (\Laravel\Nova\Nova::availableTools(request()) as $tool)
{!! $tool->renderNavigation() !!}
#endforeach
with this code:
#php
$menus = [
nova_get_menu('admin'),
];
#endphp
<section style="width: 100%; position: absolute; top: 60px;">
<ul class="sidebar-menu">
<li class="sidebar-header">MAIN NAVIGATION</li>
<li>
<a href="/nova">
<i class="fa fa-dashboard"></i> <span>Dashboard</span></i>
</a>
</li>
#foreach ($menus as $menu)
#continue(is_null($menu))
<li>
<a href="">
<i class="fa fa-dashboard"></i> <span>{{ $menu['name'] }}</span> #if ($menu['menuItems'])<i class="fa fa-angle-left pull-right"></i> #endif
</a>
#if ($menu['menuItems'])
<ul class="sidebar-submenu">
#foreach (($menu['menuItems'] ?? []) as $item)
<li>
#if ($item['type'] === 'text')
{{ $item['name'] }}
#else
<a href="{{ $item['value'] }}"
target="{{ $item['target'] }}"
#if ($item['target'] === '_blank') rel="noopener" #endif><i class="fa fa-circle-o"></i> {{ $item['name'] }}</a>
#endif
</li>
#endforeach
</ul>
#endif
</li>
#endforeach
<li>
<a href="/nova/logout">
<i class="fa fa-sign-out"></i> <span>Logout</span></i>
</a>
</li>
</ul>
</section>
Replace "admin" with the slug of your menu
You can change the HTML to what ever you want.
I used https://www.jqueryscript.net/menu/Stylish-Multi-level-Sidebar-Menu-Plugin-With-jQuery-sidebar-menu-js.html
And the result is:
You can add more then one menu like this if you need to
#php
$menus = [
nova_get_menu('admin'),
nova_get_menu('user'),
nova_get_menu('pages'),
nova_get_menu('configuration'),
nova_get_menu('store'),
];
#endphp
The foreach loop will add them all to your page in the order you put them in the $menus array.
Good luck!
Quote from this issue on GitHub:
[nova_get_menu()] only returns a PHP array. You have to handle creating the HTML yourself.
As of version 2.3.7, you will need to use this function yourself to generate your own menu HTML:
$menuJson = nova_get_menu('admin')
// Returns:
// [
// 'id',
// 'name',
// 'slug',
// 'locale',
// 'menuItems' => []
// ]
I'm working on a Laravel project and i use VueJS for notifications system.
However, i'm a real noob in VueJS dev'. Consequently, i don't know how to print a variable as text.
Situation : System of notifications work and i would like to print the number of notifications in a bootsrap badge. So, i did this :
<i class="fa fa-bell-o" aria-hidden="true"></i> Notifications <span id='badge' class="badge badge-info">{{notifications.length}}</span> <span class="caret"></span>
With this code in my Notification.vue file :
<template>
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
<i class="fa fa-bell-o" aria-hidden="true"></i> Notifications <span id='badge' class="badge badge-info">{{notifications.length}}</span> <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li style="text-align:center" v-for="notification in notifications">
<a href="#" v-on:click="MarkAsRead(notification)">
{{notification.data.idea.name}} a été validée !<br>
</a>
</li>
<li style="text-align: center" v-if="notifications.length==0">
Aucune notification !
</li>
</ul>
</li>
</template>
<script>
export default {
props: ['notifications'],
methods: {
MarkAsRead: function (notification) {
var data = {
id: notification.id
};
axios.post('/notification/read', data).then(response => {
window.location.href = "/manif/";
});
}
}
}
</script>
Finally i only see {{notifications.length}} write in the badge instead of a number...
Can you help me about this ?
Thank's
The raw mustache tags are shown because you've used v-pre directive in the parent element, which tells Vue to not compile the element and its children:
<a id="navbarDropdown" ... v-pre> <!-- Don't use v-pre here -->
...
<span ...>{{notifications.length}}</span>
</a>
Simply removing that directive should resolve the issue: demo