Run custom Element UI Vue components as pattern library components

[acollins1991]

Is there a way to initiate Vue components as pattern library components?

I'd like to create a custom version of Element UI and import components separately. In the Element UI documentation under each component there is a link to JSFiddle, so I think I just need to create a Vue instance for each component. Is there an obvious way to do this?

BTW love the tool! 👍

[Andy-set-studio]

Hey @acollins1991,

This seems a very specific use-case to me. I could be wrong though.

I think the best thing to do at this stage is to invite the wider Astrum community to make a comment on this and see what they think.

I do however like the idea of including links out to JS Fiddle / Codepen to show more advanced examples of a component/group, so good shout there 🙂

[ghost]

Using Vue components would be nice. Since Astrum is build on Vue, I'm guessing embedding a fiddle/pen shouldn't be necessary? Would be nice if the component could be mounted inline.

[lukenofurther]

We have a similar use case, which I'd guess would be fairly common. We have a library of Vue components and these are the components we'd like to catalogue in the design system. The code samples entered into the markup.html for each component would therefore show the markup needed to use the Vue component, e.g:

<my-vue-component v-param="true"></my-vue-component>

Obviously it's not currently possible (as far as I can see) to import your own components into Astrum's Vue app to use in this way.

[NonPolynomial]

Just read this issue in my break, so I can't look into it right at the moment.

The best approach would be to look up how that feature is implemented right now in vuepress and somehow adapt it.
There you can use Vue components in Markdown files.

[milotindragos]

Would be interesting to have Vue components inside Astrum something like what Catalog.style is doing with React Components seeing it was built with React.