seo Question posted in
Some basic information to get you started with this can be found here.

Vue.js – Friendly syntax without compilation templates – SEO

Vue.js is ideal library for my case, but I use it on non-SPA page.

Is there a way to bypass syntax v-bind:click? I would like the attributes starts from data-v-* and don’t contains :.

My solution (based on accepted answer):

It looks like Vue.js will not pass the exam here.
Knockout proved to be the ideal library for friendly SEO html syntax without compilation templates.

Tags:

2

Answers


  1. 0

    Short answer is: No.

    I don’t think there is a way to change the templating of Vue. The generated HTML shipped to user will be valid, because modifiers (v-for, v-bind, etc.) will be stripped of your HTML. Framework like Angular, for example, does not strip the multiple “ng-*” properties. For instance, you could write:

    <div v-if="model.length" />

    The resulting html will be:

    <div />

    Which is valid and compatible with any W3C validator.

    Login or Signup to reply.
  2. 0

    You can use script templates to “hide” your Vue-HTML from the validator. The following validates as HTML5.

    <!DOCTYPE html>
<html>
<head>
<title>Whatever</title>
</head>
<body>
<script id="some-template" type="text/template">
  <div v-model="foo" v-bind:click="dontCare">Whatever</div>
</script>
<some-template id="app"></some-template>
</body>
</html>

    This is not as much of a cheat as it might seem, since Vue-HTML is not HTML, but is in fact a template used for generating HTML (or, I think more accurately, for generating the DOM). But it is a complete cheat in the sense that the generated HTML is never subjected to the validator. 🙂

    Alternatively, you could look at using Knockout, which uses pure HTML5 (what you write is what is delivered to the browser). It is not as performant as Vue, but it is an MVVM framework.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search