Vue/Nuxt Support

[itsMattShull]

Expected Behavior

Integration with Vue/Nuxt. Where does it make sense to begin?

[Andy-set-studio]

So, some considerations and questions for us to get started:

• We've got to consider how we can make this work with the pattern library (Astrum)
• We could do with finding a way of also making this work with the generator (this currently "just" copies markup)
• Do we go single Vue component style to keep things simple?

Thanks for getting this started, @derekshull 🙂

[Andy-set-studio]

I've been thinking some more about this. Do we offer a different pattern library for each context?

So we've got https://patterns.boilerform.design for our current pattern library, but we could have https://vue.patterns.boilerform.design for this feature.

The separation and focus could be really beneficial. Unfortunately, this would mean we have to maintain several pattern libraries...

What do you think?

[itsMattShull]

@hankchizljaw I'm liking the idea of having a Vue flavor of the pattern library. I also think separating them out in Vue files is best too. Are you still thinking we integrate with Astrum? I don't know that Vue files would build in Astrum well (even though Astrum is built on Vue). If they are Vue files it'd be really easy then to pull components into Nuxt and Vue projects.

[itsMattShull]

This reason I'm thinking it'd be better this way is also because when you get into Angular, React, and Vue I feel that if we try to force a component-style framework to work like a pattern library we'll be missing some benefits that the framework provides. If the intent is to allow others to easily integrate these components into new and existing projects, starting with a fresh build of Vue/Nuxt and building the components inside of that might be best.

I think one way to present the components like Astrum would be using Storybook. I've done this in a Vue project before: https://github.com/derekshull/nuxt-starter-kit-v2

If you run that and go to localhost:9000 you'll see how storybook presents the components. If needed we can do away with the tests for now (I know, I know, some developers out there just died inside), but our intent is more for a pattern library than snapshot or integration testing.

Just throwing out more thoughts!

[Andy-set-studio]

I guess the purpose of the pattern library is to display each form element in a separate pattern to make it easy to browse and also easy to copy.

I worry about introducing another option other than Astrum for maintenance purposes. I also worry about barrier to entry for contributing too.

The more I think about Vue, React etc, the more I think that maybe we give them their own treatment completely. For instance, in Vue, I'd probably merge a lot of what the c-input-field component powers into one Vue component that is state driven and toggles attributes accordingly.

I initially thought about patterns because I wanted to allow people to copy and paste in the same way as the vanilla HTML setup, but maybe for Vue etc, we make a specific implementation of Boilerform which a user uses as part of a boilerplate.

That's where I'm at. What do you think @derekshull?

[itsMattShull]

Yeah I'm thinking along the lines you are of how to set it up for Vue. Want to PoC it out? Where should we start?

[Andy-set-studio]

Yeh I think that’s a good idea. Do you fancy running with a CodePen Pen/Project maybe? Just something simple to see how it feels. It’ll give us something to talk about too!

Pens allow collab, so maybe they’ll be more useful. Your call though 🙂

[itsMattShull]

Yeah that works. I'll try to get something going this week unless you want to start it up.

[Andy-set-studio]

I’m stacked this week, so I’d really appreciate that. Thank you 🙂

[itsMattShull]

Doesn't look like Codepen can do .vue files in it. What if we went the route of doing a new github repo and using npm generate to make a github pages version of the components?

[Andy-set-studio]

Ah, it looks like a CodePen project is on the cards then. I managed to get it running with SFCs for my personal site.