Add custom attributes to Vuetify tags

Question

How I can add custom attributes to Vuetify tags. I want add some Schema.org attributes to my site.

I have template like this:

<template>
    <v-container>
        <v-layout row wrap >
            <v-flex xs12>
                <h1 class="content-title display-1">{{ post.title }}</h1>
            </v-flex>
            <v-flex xs12>
                <div class="content-body" v-html="getMarkdown(post.text)"></div>
            </v-flex>
        </v-layout>
    </v-container>
</template>

Answer 1

Vuetify will usually “pass on” your custom attributes, unless they collide with something that's in their API. In other words, this will work (it's not clear from your question what you tried that didn't):

<v-btn itemprop="thing" />

However, a more generic and stable solution would probably be to add that markup to a wrapping element, or to create your own component that wraps the Vuetify component. Or use <meta> tags (yes, they are allowed in the body).