Closed jaylandro closed 5 years ago
@jaylandro Did you ever manage to get this working?
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.
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))
},
}
@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
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
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 🙇