[Vuejs]-Create component with CSS selector?

by

0👍

First yes it is possible to define a component using a selector or the element #id to be specific. However, it does not work quite as you are thinking if I understand correctly what you are wanting.

The method is not widely used or even well documented, link & link, but you can use what is known as an x-template. You define the component as follows.

Vue.component('my-cool-component', {
     template: '#my-cool-component', //refers to script tag id
          data() {
              //
          },
          methods: {
              //
          }
});

Then you include the actual template markup in your html within an ‘text/x-template’ script tag with the template id set from your component.

<script type="text/x-template" id="my-cool-component">
     <section>
         <h1>Title</h1>
         <p>...</p>
     </section> 
</script>

In the case of above you may use just standard html tags.

However to further clarify the second part of your question, you should be able to use custom html tags when naming your components in templates without concern because these are parsed out by Vue.js during rendering. For example if you were to write all you template markup directly in the component instead using template literals as follows,

Vue.component('my-cool-component', {
     template: `<section>
                  <h1>Title</h1>
                  <p>...</p>
                </section>',
          data() {
              //
          },
          methods: {
              //
          }
});

Then in your page markup when you include your custom html element tags <my-cool-component></my-cool-component> Vue will remove the tags and only render the template markup.

<section>
     <h1>Title</h1>
     <p>...</p>
 </section>

0👍

Not sure if i get your questions right but vuejs does not actually render these custom-tag like template-placeholders. It will transform all template-placeholders with their actual template. See the following example:

CustomComponent.vue

<template><div class="child">Hello World</div></template>

<script>
export default {   
  name: 'CustomComponent'
}
</script>

Parent Component:

<template>
  <div class="parent"><custom-component></custom-component></div>
</template>

<script>
import CustomComponent from './CustomComponent'

export default {
  components: {
    CustomComponent
  }
}
</script>

This will render a dom that looks something like this

<div class="parent"><div class="child">Hello World</div></div>

If you are really concerned about CEO I would recommend looking into server-side rendering. Otherwise all your view components are rendered using javascript execution on the client. Not sure if the search engine crawlers execute javascript or even if they do, how long they will wait for your page to render.

Leave a comment