I am trying to use the Simplert Vue plugin within my Laravel 5.7 app but I'm getting the following error:
[Vue warn]: Unknown custom element: - did you register the
component correctly? For recursive components, make sure to provide
the "name" option.
I have based my code on answer from this question Vue.js 2- sweet alert package simplert not working
app.js file:
require('./bootstrap');
window.Vue = require('vue');
import Simplert from 'vue2-simplert-plugin'
require('vue2-simplert-plugin/dist/vue2-simplert-plugin.css')
Vue.use(Simplert)
const app = new Vue({
el: '#app',
data: {
obj: {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
useConfirmBtn: true,
customConfirmBtnText: 'OK'
}
},
methods: {
openSimplert () {
this.$Simplert.open(this.obj)
},
closeSimplert () {
this.$Simplert.close()
}
}
})
home.blade.php template:
#section('content')
// ..
<simplert></simplert>
// ..
package.json:
"dependencies": {
"vue2-simplert-plugin": "^0.5.3"
}
In VSCode, there is a hint on the following line import Simplert from 'vue2-simplert-plugin' in my app.js file:
Could not find a declaration file for module 'vue2-simplert-plugin'.
'x/node_modules/vue2-simplert-plugin/dist/vue2-simplert-plugin.js'
implicitly has an 'any' type.
Could this be the problem?
When registering a Vue component, you need to include a name, list below:
export default {
name: 'example-name',
data() {
return {
}
},
so in your case:
const app = new Vue({
el: '#app',
name: 'example-name'
data: {
obj: {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
useConfirmBtn: true,
customConfirmBtnText: 'OK'
}
},
methods: {
openSimplert () {
this.$Simplert.open(this.obj)
},
closeSimplert () {
this.$Simplert.close()
}
}
})
ALTERNATIVELY
you should create a file in your resources->js->components folder called something like ExampleComponent.vue. Within here you place all of your template code (what the '#app' div should display).
with that file you should include:
<template>
//code here...
</tempate>
<script>
export default {
name: 'example-component-name',
data() {
return {
obj: {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
useConfirmBtn: true,
customConfirmBtnText: 'OK'
}
}
},
methods: {
//methods here
}
}
</script>
and then within your app.js file all you need to do is:
require('./bootstrap');
import Simplert from 'vue2-simplert-plugin'
require('vue2-simplert-plugin/dist/vue2-simplert-plugin.css')
Vue.use(Simplert)
Vue.component('example-component-name',require('./components/ExampleComponent.vue').default);
This should help in your situation - let me know :)
I don't know why but i faced the same issu and once the plugin is registered in App.vue, some components works fine with:
<Simplert></Simplert>
and some with
<simplert></simplert>
The only diff is the Uppercase / Lowercase but some components accepts the Uppercase when other not and i must use Lowercase.
Related
Please help me fix this problem. I create application using Laravel 8, Blade templates and Vue 3 components.
In that i have basic routing in Laravel. I want to add nice looking menu in admin panel https://github.com/yaminncco/vue-sidebar-menu.
Unfortunately, I don't know how to pass my menu structure to this component. When I use the example from the documentation I get an error
Failed to resolve component: router-link
I dont use router in Vue. I see in documentation example with Customize link with InertiaJa but i dont know how use it because i dont use and know InertiaJS.
My simple MainMenu.vue component code:
<template>
<SidebarMenu :menu="menu"></SidebarMenu>
</template>
<script>
import { SidebarMenu } from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'
export default {
name: "MainMenu",
components: {
SidebarMenu
},
data() {
return {
menu: [
{
header: 'Main Navigation',
hiddenOnCollapse: true
},
{
href: '/',
title: 'Dashboard',
icon: 'fa fa-user'
},
{
href: '/charts',
title: 'Charts',
icon: 'fa fa-chart-area',
child: [
{
href: '/charts/sublink',
title: 'Sub Link'
}
]
}
]
}
}
}
</script>
<style scoped>
</style>
Ok, I found a solution to the problem. Need to add own code which create\render simple link in html
in app.js add:
/*remaining application code*/
import { createApp, h } from "vue";
const customLink = {
name: 'CustomLink',
props: ['item'],
render() {
return h('a', this.$slots.default())
}
}
const app = createApp({});
app.component('custom-link', customLink)
/*remaining application code*/
and in Vue Component:
<SidebarMenu :menu="menu" :link-component-name="'custom-link'"></SidebarMenu>
I'm trying to build a Chat App that use Laravel Broadcast with laravel-echo and pusher but when I'm listening to the channel it returns laravel_echo__WEBPACK_IMPORTED_MODULE_6__.default.private is not a function
here's my script:
<script>
import ConfirmationModal from "../pages/User/ConfirmationModal";
import Message from '../models/Message';
import Echo from 'laravel-echo'
export default {
name: 'UserLayout',
components : {
ConfirmationModal
},
data: () => ({
isLoading : false,
user : {},
drawer: false,
rawConversations : {},
}),
mounted () {
this.user = JSON.parse(localStorage.user);
this.fetchConversations();
},
created () {
Echo.private("userStatus").listen("StatusEvent", e => {
console.log('Event listen CommentSent');
});
}
}
</script>
here's my directory. BTW, I'm using Quasar Framework for my CSS and directory Laravel and Vue is separate.
I'm new in vue.js.
My app.js is:
import { store } from './store';
const app = new Vue({
el: '#app',
store,
mounted(){
...
},
methods:{
...
}
});
I'm using laravel and I don't want every time to create components for very small reason.
Without making components app.js will be full of methods whose all are not useful in every pages. That's why I want a way to extend app.js from my home.blade.php file's
#section(scripts)
<script>
...
</script>
#endsection
(without creating any component).
Or, Updating/add in data:{ ... } & methods:{ ... } using that <script> .. </script> in *.blade.php
I've found a solution!
Use Mixin
Create mixin.js file besides app.js
For example
export var custom = {
data: {
show: true
},
methods: {
hide: function(){
this.show = false;
}
},
watch: {
...
},
...
};
and, in app.js file:
import { store } from './store';
import { custom } from './mixin'; //Import mixin
window.app = new Vue({
el: '#app',
mixins: [custom], // Add mixin var here
store,
});
/*
[note: for multiple: import {custom1, custom2, ...} and define [custom1, custom2, ...] ]
*/
More details: Official Documentation
I have const:
export const globalUser = new Vue({
created: function(){
this.getActualUser();
},
data: {
ActualUser: {name:'',meta:'',tipo:''}
},
methods:{
getActualUser: function(){
var urlMeta='usuarioActual';
axios.get(urlMeta).then(response=>{
this.ActualUser=response.data;
});
}
}
});
Now i'm importing that in a component of vue js
import {globalUser} from '../app.js'
Here is my data:
data:function(){
return {
usuarioActual:globalUser.ActualUser,
anotherData:{}
}
}
This returns me:
"usuarioActual": {
"name": "",
"meta": "",
"tipo": ""
}, the data is empty.
What i want is the returns me data after the method getActualUser run:
ActualUser: {name:'currentName',meta:'currentDat',tipo:'currentType'}
It works well:
axios.get(urlMeta).then(response=>{
this.ActualUser=response.data;
});
I did it in a wrong way, maybe it will work.
I get a different solution:
Instead of using data in components, i'm using "props".
I don't need to import, just called the props in the blade template of laravel, there i can use #elements from laravel.
Props in component:
props:{
usuario:String
},
Now i'm using that:
#extends('layouts.app')
#section('content')
<user-component usuario="{{ Auth::user()->name }}"></user-component>
#endsection
Works well, if you need more data u can add a function in the Model.
Now i can use that in my template of component
<template>
<tr v-if="{{usuario}} =='Admin'">
I'm new to vue.js so I know this is a repeated issue but cannot sort this out.
the project works but I cannot add a new component. Nutrition component works, profile does not
My main.js
import Nutrition from './components/nutrition/Nutrition.vue'
import Profile from './components/profile/Profile.vue'
var Vue = require('vue');
var NProgress = require('nprogress');
var _ = require('lodash');
// Plugins
Vue.use(require('vuedraggable'));
// Components
Vue.component('nutrition', Nutrition);
Vue.component('profile', Profile);
// Partials
Vue.partial('payment-fields', require('./components/forms/PaymentFields.html'));
// Filters
Vue.filter('round', function(value, places) {
return _.round(value, places);
});
Vue.filter('format', require('./filters/format.js'))
// Transitions
Vue.transition('slide', {enterClass: 'slideInDown', leaveClass: 'slideOutUp', type: 'animation'})
// Send csrf token
Vue.http.options.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;
// Main Vue instance
new Vue({
el: '#app',
components: {
},
events: {
progress(progress) {
if (progress === 'start') {
NProgress.start();
} else if (progress === 'done') {
NProgress.done();
} else {
NProgress.set(progress);
}
},
'flash.success': function (message) {
this.$refs.flash.showMessage(message, 'success');
},
'flash.error': function (message) {
this.$refs.flash.showMessage(message, 'error');
}
}
});
Profile.vue
<template>
<div class="reddit-list">
<h3>Profile </h3>
<ul>
</ul>
</div>
</template>
<script type="text/babel">
export default {
name: 'profile', // this is what the Warning is talking about.
components: {
},
props: {
model: Array,
}
}
</script>
profile.blade.php
#extends('layouts.app')
#section('title', 'Profile')
#section('body-class', 'profile show')
#section('content')
<script>
window.Laravel.profileData = []
</script>
<profile></profile>
#endsection
Whenever I try to go to this page I get:
[Vue warn]: Unknown custom element: <profile> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I tried doing a local component such as
Vue.components('profile', {
template: '<div>A custom component!</div>'
});
or even I tried adding the profile into the components in vue but still no luck, can anyone point me in the right direction?
Simply clear the cache on your browser if you run into this problem. Worked pretty well for me
I didn't fixed it but it was fixed by itself it appears some kind of magic called (CACHE). i did have my gulp watch running but i powered off my computer, and then ON again and it works.