Utilizing Vue.js to display dynamic data within a template using components

Using the egoist/vue-html plugin to render HTML works perfectly with standard HTML content, but encounters issues when trying to include a component tag.

When attempting to add the Breadcrumb component in the template, it fails to work. Can anyone pinpoint what might be causing this error?

This is my current setup:

<script>
import Breadcrumb from '~components/Breadcrumb'
import Vue from 'vue'
import HTML from 'vue-html'

Vue.use(HTML)

export default {
  data () {
    return {
      html: '<div><Breadcrumb/></div>'
    }
  },
  render (h) {
    return this.$html(this.html)
  },
  components: {
    Breadcrumb
  }
}
</script>

Answer №1

Make sure to use a component name with a hyphen in accordance with the guidelines of the draft specification:

The custom element type refers to a custom element interface and must consist of characters that align with the NCName production [XML-NAMES], include a U+002D HYPHEN-MINUS character, and should not contain any uppercase ASCII letters [HTML]. The custom element type is restricted from being certain values:

  • annotation-xml
  • color-profile
  • font-face
  • font-face-src
  • font-face-uri
  • font-face-format
  • font-face-name
  • missing-glyph

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I include a nested object in an ng-repeat loop in Angular?

I'm new to using Angular so please excuse my basic question. Here is the structure of my model for posts and comments: [ { "title": "awesome post", "desc": "asdf", "comment_set": [ { "id": 2, ...

Tips for transferring a variable from Next.js to a plain JavaScript file

When it comes to Canvas Dom operations in my NextJs file, I decided to include a Vanilla JS file using 'next/script'. The code for this is: <Script id="canvasJS" src="/lib/canvas.js" ></Script>. Everything seems to ...

Can Comet be implemented without utilizing PrototypeJs?

Can Comet be implemented without utilizing PrototypeJs? ...

Receiving undefined values when passing down props from an asynchronous API call

After diving into single file components in Vue in an effort to increase modularity, I've encountered issues with passing down props when they are set by an async response from an API. Currently, my project involves: parent component child comp ...

Encountering issues with resolving dependency tree post updating node, specifically with node-sass dependency causing failure

Following the update to the latest version of Node.js, I encountered error messages when attempting to use npm audit fix --force. It appears that resolving dependency tree issues is proving to be difficult. Despite extensive research and trying various s ...

What are the benefits of using beforeRouteEnter over mounted in Vue.js?

What is the purpose of the beforeRouteEnter navigation guard in vue-router? Can you give examples of times when beforeRouteEnter may be triggered without mounted being called? When would you choose to use beforeRouteEnter over mounted? ...

Is there a way to remove all JavaScript files without touching the ones in the node_module folder?

How can I delete all the javascript files in a Node.js project, excluding those within the node_module directory, regardless of the operating system? I've attempted to achieve this using the `del-cli` npm package with the following script: del '* ...

The functionality of AngularJS ng-model seems to be disrupted when it is set within a directive

Is it possible to automatically generate the ng-model of an input based on the name of the input itself? This requirement arises from using Html.TextBoxFor in MVC, which creates the necessary name for binding the input to the server-side model. To streamli ...

Error message: Authentication timestamp issue with cex.io web socket

Currently in the process of connecting to the CEX.IO bitcoin exchange's websocket. The websocket connection itself is fine, but encountering an error during the authentication phase: "Timestamp is not in 20sec range." Unsure about the cause of this is ...

How can I make a div using jQuery fade in when an input field is in

I want to create a tooltip that changes its innerHTML and fades in when an input on my form is focused. Additionally, I need to check if the tooltip has been faded in as it initially loads faded out. In essence, I am looking to switch the tooltip content ...

Make the adjustment from an H1 tag to an H2 tag with the help of

I need assistance with changing the HTML code from using an <h1> tag to a <h3> tag, using Vanilla JavaScript. Here is the code snippet in question: <h1 class="price-heading ult-responsive cust-headformat" data-ultimate-target=" ...

What makes running the 'rimraf dist' command in a build script essential?

Why would the "rimraf dist" command be used in the build script of a package.json file? "scripts": { "build": "rimraf dist ..." }, ...

Tips for verifying the presence of a Firestore Document reference within a JavaScript array of Document references

I am currently dealing with a document that contains an array field storing references to other documents. Upon fetching the document data and verifying if a document reference exists within the array, I consistently receive a result indicating that it is ...

"Having issues with Django not properly applying the JavaScript and CSS files I've linked in

I have completed my project and organized all the necessary files, including index.html, css, js, and settings.py within the appropriate folders. I am encountering an issue with applying a pen from the following source: CodePen index.html <!DOCTYPE h ...

What is the best way to pass a prop into the <router-link>?

If I replace this {{ name }}, the result is "campaigns" Now, I want to use that in my link <router-link :to="'/' + '123' + '/' + item.id"> {{ item.name }}</router-link> I attempted to substitute '1 ...

The Vue component's TypeScript object prop type does not match the expected value

Having trouble with the type of Object properties in Vue Single File Components using TypeScript (created with Vue CLI 3)? Check out the example below to see the issue. The type of this.product is currently showing as (() => any) | ComputedOptions<a ...

Display loading spinner and lock the page while a request is being processed via AJAX

Currently, I am working on a project using MVC in C#, along with Bootstrap and FontAwesome. The main objective of my project is to display a spinner and disable the page while waiting for an ajax request. Up until now, I have been able to achieve this go ...

Using the onclick attribute as a unique identifier for a button

I am currently facing a challenge with a form that does not have an ID Here is the code snippet in question: <button class="btn btn-primary" onclick="showModal()" type="button">Browse Data</button> Unfortunately, I don't have any contro ...

Utilizing React Hooks to toggle the aria-expanded boolean value

I'm presently focusing on enhancing accessibility for a web application utilizing React and Ant Design's Select component. The value of aria-expanded is currently set to 'false' string. My goal is to utilize React's useState to to ...

Uploading Images to Cloudinary in a MERN Stack: A Step-by-Step Guide

I am facing an issue while trying to store company details, including a company logo, in Mongo DB. I am attempting to upload the image to Cloudinary and then save the URL in Mongo DB along with other details. Currently, my code is not functioning as expec ...