Guidance for using customized Design System as an npm module from a private git repository

[ryanberg]

We're intending to use Vue Design System as the starting point for our internal design system.
As recommended in the Getting Started wiki, we'll be publishing our customized version as a new package that our main website will import.

I'm struggling to arrive at the "right" approach to accomplish the following:

• Start with a clone of vue-design-system or checkout of master
• Begin working in a repository connected to our company's internal GitLab
• Customize existing settings/files, and build out the rest of our system
• Retain the ability to pull down updates made to the master branch of the original project, which seem to be happening at a rapid pace, and merge into our customized version

Is there a specific approach you're intending teams building on a foundation of vue-design-system to use?

[ryanberg]

For the moment, I've up and running using the instructions from How to fork to a private gitlab instance.

[arielsalminen]

@ryanberg Thanks for the suggestion and questions. This is an important topic that I’ve been also pondering lately. Definitely needs documentation. This is related to issue #62 as well.

There's no “easy” upgrade path right now as this project is more of a boilerplate/a set of tools that you take and start using and customizing to your own organizations needs (at least this is how I feel).

I think for now, the best way to go depends on the level of customization that you’ll want to do to the system.

There’s a suggestion here which is true for Vue Design System as well (since it’s structure is very similar to current Vue Webpack Template): vuejs-templates/webpack#1166

[jkarttunen]

Seconded. I'd say preferred way for vue.js project is just using vue-cli, and adding stuff you need, like using progressive web app template. Now my problem is, how do I add VDS to an app created with vue-cli?

[arielsalminen]

@jkarttunen The preferred way to use Vue Design System is as a private NPM dependency, so it shouldn’t require much changes to your existing apps. See instructions in Getting Started: https://github.com/viljamis/vue-design-system/wiki/getting-started#using-design-system-as-an-npm-module

[ryanberg]

There's no “easy” upgrade path right now as this project is more of a boilerplate/a set of tools that you take and start using and customizing to your own organizations needs (at least this is how I feel).

Yeah, I suspect that the further down this road I go, the less want/need I'll have for updates to vue-design-system. But for now, while our custom system is not yet in production, and you seem to be making rapid progress on the boilerplate, I'll be greedy and pull down as many of the improvements as I can.

[arielsalminen]

@ryanberg Definitely. That’s kind of the approach I’ve used with my clients as well. Started off with this, but then, depending on their organizations needs, we will start customizing things like the build processes and building new features on top of this.

[arielsalminen]

I’ve added some more guidance and examples now related to this: https://github.com/viljamis/vue-design-system#examples.

Separately, we’re planning on starting a task to make the updating of the system easier via vue-cli or similar. As that is tracked in another issue (#83), I will be closing this one.