Vuejs - Unknown custom element: <trix-editor> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[onachassi]

Hey, thanks for the plugin. We're having issues with the install.

It seems like it's not recognizing the component within the VueTrix.vue file, have you seen this issue before? Do you have any solution?

The error message is the following:

[Vue warn]: Unknown custom element: <trix-editor> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <VueTrix> at src/components/VueTrix.vue
       <HelpModal> at src\components\modals\helpModal.vue

The Code is below:

<template>
	<div class="modal-container">
             <VueTrix ></VueTrix >      
	</div>
</template>

<script>
import VueTrix from 'vue-trix'
export default {
  name: 'helpModal',
  components: {
    VueTrix
  },
  data () {
    return {
      editorContent: ''
    }
  },
  methods: {

  },
  computed: {

  }
}
</script>

<style lang="css" scoped>

</style>

[hanhdt]

Hi, thanks for issue feedback. I got it. Because Vue will complaint to unknown custom element <trix-editor>. You could add the <trix-editor> tag to Vue's list of ignoredElements under main.js:

Vue.config.ignoredElements = ['trix-editor']

Please look at example project.
Also, I will update codes to tell Vue ignore this tag too.

Additional, one small thing that you might want to use self-closing tag like <VueTrix/> because since component have no content inside, it's shorter and no warnings when you're using eslint.

[abrhambas01]

Is there any fixes for this issue ? I use this with inline-template in laravel..

<register-user inline-template>
<div class="mb-2 w-3/4">
	<label for="name" class="block uppercase tracking-wide text-black-v2 text-xs font-bold mb-2">Complete Background and Details
	</label>
	<VueTrix v-model="form.complete_description" class="editor1" placeholder="Enter Content"/>
</div>`
</register-user>

in my vue-file..

<script>
import urls from './scripts/endpoints.js';
import api from './scripts/api.js';
import VueTrix from "vue-trix";
import _ from "lodash";
export default { 
	components : { VueTrix },
	data(){
		return { 
			form : {
				maxFiles: 1,
				complete_description : "",

[hanhdt]

@abrhambas01 ,

Have you tried to my suggestions with Vue config file?
Or let try to change your component vue following:

components: {
     'vue-trix': VueTrix
}

[abrhambas01]

Yep, I did but the trix-editor doesn't show up.

[hanhdt]

Can you check out latest version?
And change Vue's config file.

// Somewhere in your code where you have access to the Vue instance
Vue.config.ignoredElements = [
    'trix-editor'
];

[abrhambas01]

what do you mean by checking out ? installing the latest vue-trix?

[hanhdt]

Yes, please install the latest vue-trix.
I have updated some minor things.

[abrhambas01]

Hey, I want to ask a favor, can you please do a little bit of code review for me,

I already imported stuff inside my modules.js like this

import VueTrix from 'vue-trix';
Vue.use(VueTrix);

Ok, I'l implement it and i want to ask if can I use this in an inline-template ?? @hanhdt in an .erb or in blade in laravel, something like thsi :)

<publish-blog inline-template>
	<div class="ml-4 mt-4 p-4 w-1/2 bg-white">
		<form method="POST" @submit.prevent="publish_blog" class="font-basic pt-4 py-4 ml-3 w-full">
			<h3>publish blog</h3>
			@include("admin.blogs._form")
		</form>
	</div>  
</publish-blog> 

and inside the _form.blade.php file, can I use it like :

<div class="mb-2 w-3/4">
	<label for="name" class="block uppercase tracking-wide text-black-v2 text-xs font-bold mb-2">Complete Background and Details
	</label>
	<VueTrix v-model="form.complete_description" class="editor1" placeholder="Enter Content"/>
</div>

cause it won't display in my form...