Unable to display vue components withing swal

[amustapha]

I have a component for modifying user information, sway
if i do something like
this.$swal({ title: 'Edit user', html: '<user-component></user-component>' })
The body turns out to be blank

[anteriovieira]

You're going to have to take this example to do this.

import Vue from 'vue'
import UserComp from '/path/to/user-compoennt'

let UserCompInstance = new (Vue.extend(UserComp))

export default {
  methods: {
    showUser() {
    
      this.$swal({
        content: UserCompInstance.$mount().$el
      })
    
    }
  }
}

[ilterocal]

@anteriovieira thanks for your reply.

I tried your solution but when I use a plugin in the loaded component -such as vue-i18ns- it throws an error.

vue.common.js:576 [Vue warn]: Error in render: "TypeError: Cannot read property '_t' of undefined" (found in <Root>) warn @ vue.common.js:576 logError @ vue.common.js:1697 globalHandleError @ vue.common.js:1692 handleError @ vue.common.js:1681 Vue._render @ vue.common.js:4441 updateComponent @ vue.common.js:2746 get @ vue.common.js:3096 Watcher @ vue.common.js:3085 mountComponent @ vue.common.js:2753 webpackJsonp../node_modules/vue/dist/vue.common.js.Vue$3.$mount @ vue.common.js:8360 webpackJsonp../node_modules/vue/dist/vue.common.js.Vue$3.$mount @ vue.common.js:10700 showTerms @ register.vue:129 boundFn @ vue.common.js:190 invoker @ vue.common.js:1988 fn._withTask.fn._withTask @ vue.common.js:1786 vue.common.js:1701 TypeError: Cannot read property '_t' of undefined at Proxy.Vue.$t (vue-i18n.esm.js:174)

Any clue?

[anteriovieira]

Can you reproduce this int the codesandbox?

[vesper8]

tried to get this working, I don't receive any errors when using your example @anteriovieira, however the body is still blank

This is my code:

SwalContent.vue

<template>
  <div>
    test
  </div>
</template>

<script>
export default {};
</script>

Home.vue

<template>
  <div>

  </div>
</template>

<script>
import SwalContent from '@/components/SwalContent';

const SwalContentInstance = new (Vue.extend(SwalContent));

export default {
    methods: {
      showPopup() {
        this.$swal({
          content: SwalContentInstance.$mount().$el,
        });
      }
    },
    mounted() {
      this.showPopup();
    }
};
</script>

any idea what I'm doing wrong?

[vesper8]

hrmm.. it seems that your package just doesn't support the content prop

if you replace the above example by change content: to html: then it works