Error when using Vue plugin in Laravel: Unknown custom element: <simplert>

Question

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?

CodeBoyCode CodeBoyCode · Accepted Answer · 2019-01-30T12:59:18

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 :)

Error when using Vue plugin in Laravel: Unknown custom element: <simplert>

2 Answers