Building a design system on top of existing framework like Vuetify

[jaylandro]

Our team had certain requirements requiring us to utilize some individual components from Vuetify. I am struggling trying to get elements which are extending vuetify components to render properly in the Vue Design System. I have followed a similar thread on vue-styleguidist here: https://github.com/vue-styleguidist/vue-styleguidist/issues/92

Does anyone have a method they have successfully used with Vue Design System?

Thanks 🙇

[arielsalminen]

@jaylandro Did you ever manage to get this working?

[jaylandro]

I have traction, last missing part is wrapping the generated react style guide markup in v-app.

I tried adding in to the body template in docs.config.js like this:

    /**
     * Custom wrapper template for the documentation.
     */
    template: {
        title: 'Example — Vue Design System',
        lang: 'en',
        trimWhitespace: true,
        head: {
            meta: [
                {
                    name: 'viewport',
                    content: 'width=device-width,initial-scale=1.0',
                },
                {
                    name: 'format-detection',
                    content: 'telephone=no',
                },
            ],
        },
        body: {
            raw: '<v-app data-app></v-app>'
        }
    },

But that appears after the rsg root component, not wrapping it.

[jaylandro]

Also my system.js looks like this:

import instance from '@/utils/vueInstance'
import Vuetify from 'vuetify/es5/components/Vuetify'
import VApp from 'vuetify/es5/components/VApp'
import transitions from 'vuetify/es5/components/transitions'
import directives from 'vuetify/es5/directives'

Vue.use(Vuetify, {
    components: {
        VApp,
        transitions,
    },
    directives,
})

// Defines contexts to require
// (you should remove templates from this if not used in production)
const contexts = [require.context('@/elements/', true, /\.vue$/), require.context('@/patterns/', true, /\.vue$/)]

const components = [Vuetify, VApp]
contexts.forEach(context => {
    context.keys().forEach(key => components.push(context(key).default))
})

export default {
    install(Vue) {
        components.forEach(c => Vue.component(c.name, c))
    },
}

[arielsalminen]

@jaylandro This is definitely possible, I tested earlier and got everything working. Did you check out Styleguidist’s demo for Vuetify: https://github.com/vue-styleguidist/vue-styleguidist/tree/master/examples/vuetify ?

I think what’s missing is that you need to separately import vuetify and everything related to styleguidist. Checkout the config files here: https://github.com/vue-styleguidist/vue-styleguidist/blob/master/examples/vuetify/config/global.requires.js

[barclayd]

I have written up a mini guide with steps as to how to implement Vuetify into the Vue Design System, with a request for documentation raised in this issue: https://github.com/viljamis/vue-design-system/issues/187