Show HN: Gov.uk Vue, a Vue Component Library for the Gov.uk Design System

[matteason]

https://govukvue.org/

Hi HN,

I've built a Vue component library based on the GOV.UK Design System, which is used for government services in the UK. The Design System is well-known for being accessible, well designed and thoroughly researched, and it's been used as the basis for many other governments' and organisations' design systems.

GOV.UK Vue includes every component in the GOV.UK Design System, with comprehensive docs. It can also be used for projects that aren't related to GOV.UK, as long as they don't use the GOV.UK branding

[rmason]

I've been involved with the open data movement here in Michigan for a dozen years. A lot of us have been inspired by what happened in Britain in 2010 when a change in government allowed them to reimagine Britain's digital footprint.

Here's a video by their chief architect detailing the changes.

https://www.youtube.com/watch?v=yvB6BqYs2T0

I know there's an O'Reilly video about this guy's boss but I can't find it. Sadly another government change was to end all this development. But in the end near as i can figure though a lot of the bosses left the changes have continued but at a slower rate.

No government website in America begins to compare to the clearness and simplicity that exists in Britain nearly a dozen years later.

[NoboruWataya → rmason]

Interesting that GDS was born out of the shift to a Conservative government. 14 years later the Tories aren't exactly associated with openness, forward thinking or investment in public services.

[jonp888 → NoboruWataya]

The conservative party of 2010 was very different to that of today

Back then it had hardliners like John Redwood and Bill Cash, but also pragmatic moderates such as William Hague, Ken Clarke and Rory Stewart.

Brexit destroyed the party from within. Over time as it became more and more difficult to defend in any non-ideological way and the party leadership became more and more autocratic in ever more desperate attempts to force it to a conclusion, they all either left politics, switched allegiance or were expelled from the party. What was left were the hardliners, the truly crazy and those willing to say anything at all in return for power.

[butterknife → NoboruWataya]

It was a coalition government.

[NoboruWataya → butterknife]

Sure, but Francis Maude, the minister credited in the video with enabling the project, was a Conservative.

[julkali → NoboruWataya]

Shows that things are not as black and white :)

[scrlk → rmason]

Speaking as a Brit, it amazes me that Gov.uk somehow managed to avoid getting purged under various administrations from 2010-24. No doubt slowing things down and flying under the radar helped, otherwise it would have probably gotten the chop via some asinine HM Treasury spending review.

The Government Digital Service (GDS) was recently moved from the Cabinet Office (pretty close to the centre of power) to the Department for Science, Innovation and Technology. It will be interesting to see if the GDS and Gov.uk can retain the same clout and effectiveness after the move.

[jen20 → scrlk]

I remember hearing a talk in around 2014 where one of the leads from GDS said that Frances Maud made it his business to ensure that no one and nothing interfered with what they were doing. I’m surprised that lasted through the May/Johnson/Truss/Sunak years though.

[gm3dmo → jen20]

The GDS had "teeth". Forcing the reset of Universal Credit for instance:

https://beeckcenter.georgetown.edu/lessons-uk-universal-cred...

that can't have been an easy decision to take.

[gm3dmo → rmason]

https://public.digital/about-pd/our-people is a consultancy formed by a number of the senior folks involved in getting the Government Digital Service (GDS) off the ground back in the 2010's.

[beart → rmason]

Hey, fellow resident here. Is https://data.michigan.gov/ the focal point for open data in Michigan, or are there other sources worth knowing about?

[pimlottc]

This is cool but I think you should be crystal clear that this is not an official gov.uk project. Like, put the word "unofficial" in the header, project description, etc.

[denysvitali]

This is impressively good - I admit that without looking at the URL I felt like visiting an official gov.uk website.

Now, as someone else mentioned this might be a bit deceiving, so I wonder in what context could this be used (outside of the gov.uk use case). Their design system is really good, so I don't mind people copying it - hopefully not to the point of Bootstrap's websites

[matteason → denysvitali]

One example is the RNIB (Blindness and sight loss charity in the UK) - they use various bits of GOV.UK Frontend on their website, such as the breadcrumbs and accordion on [0]. Many local councils use it too (or a version of it).

Because it's so heavily tested for accessibility it makes sense to use in those kinds of contexts where accessibility is a very high priority.

GOV.UK Frontend can be heavily customised via Sass variables (eg the font stack in [1]) so the components don't have to look like GOV.UK if you don't want them to. GOV.UK Vue pulls all its styling from Frontend so it's as customisable as Frontend is.

[0] https://www.rnib.org.uk/living-with-sight-loss/assistive-aid...

[1] https://github.com/alphagov/govuk-frontend/blob/main/package...

[denysvitali → matteason]

Good job! I'll make sure to consider this option for my next Vue frontend :)

[pglevy → denysvitali]

The US Web Design System actually links to various implementations, some community-generated. It's not new to try to make it easier for teams to implement the system using various frameworks.

https://designsystem.digital.gov/documentation/implementatio...

Nice work, matteason!

[alias_neo → denysvitali]

I might be doubly misunderstanding this, because my first concern was that this could be used to impersonate government services; but; my second thought was (as someone with no idea of web tech stacks), perhaps this is a reimplementation using a different stack (Vue) of the original, for use for the same purposes?

Basically, you want to build a gov.uk site using your preferred stack, which happens to be the same as this, use this instead?

Again, many be completely misunderstanding, so hopefully someone can clarify.

[matteason → alias_neo]

Exactly - services on GOV.UK are developed by teams across government (as well as agencies etc), and they're (mostly) free to use whatever tech makes sense for the team and the project.

GOV.UK Vue isn't intended for normal, bread-and-butter transactional services (usually a series of form pages) but for things like more complex internal tools, dashboards, mapping etc which would be using JS to provide interactivity

[manuelleduc]

Very interesting. France government is providing a design system as well https://www.systeme-de-design.gouv.fr/ A Vue impementation is available too https://vue-ds.fr/

[com → manuelleduc]

I hadn’t noticed this being rolled out yet in the bits of gouv.fr that I interact with.

I especially like the colour palettes.

I wish that the Vue storybook showed the demo component first. I wish ALL storybooks did that actually!

[alphalima]

Hey Matt,

Super cool to see this, and congrats on 1.0!

One question, has the GDS stance on Javascript softened, namely progressive enhancement being essentially mandatory [1], since I last worked with you? Is the target for more controlled user groups, non-govuk projects, or do you do SSR to give a usable first HTML response?

[1] https://www.gov.uk/service-manual/technology/using-progressi... Last update: 16 December 2019

[midenginedcoupe → alphalima]

No, it hasn't.

Although GDS lost their teeth (and their technical way) some years ago, this rule is still a major win for end users. To be honest, I'm sick of seeing techies fob this one off just because they want to use [insert fashionable framework of the day].

Disclaimer: I have a dog in this fight as I run a forms SaaS aimed at central gov and have also re-implemented the GOV.UK design system. But I've done it the way it was intended and only used JS for progressive enhancement.

[matteason → alphalima]

Haha, hi AL!

Yeah the target for this definitely isn't the regular transactional GOV.UK services. I've added a note at the top of the installation guide:

> GOV.UK Vue (or any JavaScript library) might not be suitable for your project if it's a standard transactional government service. Make sure you read the guidance on progressive enhancement and building more complex services before starting. GOV.UK Vue is designed to be used in more complex services, like interactive mapping, or internal tools where you've determined that JavaScript is acceptable.

GDS are also currently doing exploratory work to investigate how Frontend can be more closely integrated with React/Vue/Svelte/Angular etc, so it's definitely not verboten: https://github.com/alphagov/govuk-frontend/issues/5172

SSR/SSG is supported (the docs website is an SSG Nuxt app) but I need to do some work to improve how it works for certain components to ensure the state they're first rendered in is usable on its own (eg defaulting accordion components to open on the server-rendered version)

[alphalima → matteason]

Nice!

I've been using GOVUK stuff for my own purposes for a good-long while now, this should speed up the process.

I'll try to plug your thing into Json Forms [1], then I'll be back to the good old days.

[1] https://github.com/eclipsesource/jsonforms

[pcrh]

Gov.uk is well known for its successful design. Does anyone know of a source that discusses why the design is/was so well designed and implemented? And did anyone get a knighthood out of it?

[epolanski → pcrh]

I sometimes read the GitHub issues, lots to learn.

[KronisLV]

I like this, feels very usable and not too visually noisy!

For the most part, the most feature complete component library I've found for Vue is PrimeVue https://primevue.org/ with their CSS utilities https://primeflex.org/ and icons too https://primevue.org/icons

There's also a version for React https://primereact.org/ and for Angular https://primeng.org/ and even JSF https://www.primefaces.org/

I wish there were more like that, that carry over across different tech stacks, while also offering nice support for various themes, as well as a lot of decent components.

[vegancap]

I'm rarely super proud of our gov, but my god their digital team are killing it, and have been for some years

[smackay]

Horn tooting time...

I wrote, https://github.com/wildfish/crispy-forms-gds/, a template pack for Crispy Forms for regular, form-based, Django sites.

Matt's done a great job and it will certainly take out a lot, if not most of the pain in dealing with accessibility requirements, and in particular the audit process that gov.uk puts projects through to make sure everyone has access to the sites.

[matteason → smackay]

Oh nice! Have you considered submitting it to https://design-system.service.gov.uk/community/resources-and... ? There's no Django solution there at the moment

[smackay → matteason]

Thanks for that. I didn't realise that the community extended beyond the government departments.

[londons_explore]

How does performance compare? Can one still get it to load in 100 milliseconds on a typical broadband connection? (Enough to feel instant)

[nemesis17]

Happy to see this! Very neat! On my last gig, I was one of the contributors for the govuk components using playframework/twirl: https://github.com/hmrc/play-frontend-hmrc.

[divbzero]

The font displayed on GOV.UK Vue is different from the default font for the GOV.UK Design System. This makes sense given that:

(a) GOV.UK Vue focuses on components, not styles; and

(b) GDS Transport, the default font for the GOV.UK Design System, is apparently not publicly available. https://designnotes.blog.gov.uk/2015/03/11/can-i-use-the-gov...

[spankalee]

It'd be really great if these were cross-framework compatible web components.

[langcss → spankalee]

Or better web standards allow everything you need for the common things in a web app to be plain html and css so that porting to JSX etc. is mechanical.

For example menu systems, popups etc. Yes there are html css hacks but they are indeed hacks. A checkbox is not a button or a parent menu.

[Tajnymag]

Czech eGovernment has a similar component library with support for pure HTML, React, Vue and Angular.

link: https://designsystem.gov.cz/

[stuaxo]

Do you generate the updates for this when GDS frontend updates?

I think that's how the GDS django support stays up to date, otherwise it will be hard to keep up.

[matteason → stuaxo]

GOV.UK Vue doesn't provide any of the Frontend styling directly, it's up to the consuming project to include it. I've done that so that you can add Vue to server-rendered projects which already include Frontend.

Frontend updates are often CSS-only, so those will be taken care of by the consuming project updating it. For markup changes and new components, that's a manual process on my side. Markup changes are usually minor and new components are rare, so it's not too much effort to keep up. I work on GOV.UK services in my day job so I've always got an eye on what's coming up.

[midenginedcoupe]

A friendly word of warning - I also re-implemented the GOV.UK design system for my form builder SaaS and stood up a demo form showing off the components in a real multi-step form. All the questions were literally "This is question 1" and "This is what a radio group question with a heading looks like" but Google's bots eventually found it and flagged my entire domain on the phishing lists because it thought it was trying to impersonate a real government service. It was an utter shit-show trying to get Google to undo their stupidity, all whilst my customers couldn't access their services.

I put up a dumb password prompt at the start of the journey (with the password given on the page) and haven't been flagged again since :fingerscrossed:

[matteason → midenginedcoupe]

Oof, thanks, I'll bear that in mind! The docs page has been up for a year or so without any issues but if I put up a more fully-featured demo I'll be careful

[NtG_UK]

Impressive, but haven’t we just handed crooks the perfect tool for crafting their next GOV.UK themed phishing site?

[matteason → NtG_UK]

GOV.UK Frontend is already fully open source [0] with comprehensive documentation [1] and GDS encourage community contributions, libraries and resources [2]. If there was any worry about phishing that would be a question for GDS

[0] https://github.com/alphagov/govuk-frontend

[1] https://design-system.service.gov.uk/

[2] https://design-system.service.gov.uk/community/resources-and...

[londons_explore → matteason]

Also, copying an html page for phishing is easy - I'm sure the Google/Facebook login pages have been copied by hundreds of people already.

Phishers probably wouldn't even bother using a vue component - it's easier to copy the whole page from dev tools body.innerHTMl

[baliex → matteason]

This is impressive Matt, and I love the design system GDS has developed, but I'm not sure they want non-government services to use the system. From the second link you posted:

> Use this design system to make *government* services consistent with GOV.UK

Emphasis mine. Are GDS aware of this work? I am in no way affiliated with GDS by the way.

--

I'm always wary of this kind of thing not being on a gov.uk domain, which in this case is entirely appropriate because it's not in anyway official or endorsed by GDS. Not for any direct phishing/crooks concerns as raised above, but because it waters down the impact of this kind of thing always being on gov.uk domains.

--

Edit: I'd be _very_ surprised if GDS don't take issue with you having "GOV.UK" in the name given that it is no way associated with gov.uk

[matteason → baliex]

Non-GOV.UK services are free to use everything except the branding, per [0]

Plenty of non-gov organisations use various bits of it, for example the breadcrumbs and accordion on [1]

[0] https://www.gov.uk/service-manual/design/making-your-service...

[1] https://www.rnib.org.uk/living-with-sight-loss/assistive-aid...

Edit: Re naming - GOV.UK [Thing] is an established convention for community tools, as shown on [3]. GDS are aware of the project.

[3] https://design-system.service.gov.uk/community/resources-and...

[esquivalience → matteason]

This comment was really helpful, and addressed many of my instinctive reactions too.

[baliex → matteason]

I stand corrected :)

[globular-toast → NtG_UK]

That's a good thing, because people need to learn how to really check the authenticity of a website and not base it on how it looks. See security by obscurity.

[unsupp0rted → NtG_UK]

Crooks don't need component libraries to mimic government websites. And their victims probably wouldn't notice one way or the other.

[tialaramex → unsupp0rted]

There's an old Microsoft study examining what might help users to not give crooks their credentials. The participants used their real credentials to attempt a real bank transaction, and Microsoft studied what might count as a red flag and stop them from attempting this transaction on a bogus site, variations in UI warnings, layout etc..

Nothing. Nothing you could do stopped users from persisting in their goal, despite all the red flags, humans get stuck on a mission, it's called "Get-there-itis" and it kills private pilots, it causes those "How could you be such a moron?" bridge strikes you see on Youtube, it's a defect in human psychology, you have to design knowing that this defect exists.

So what works? Brick Wall UX. When the user can't do the wrong thing they won't. They'll still try of course, but now they can't succeed (in giving their credentials to crooks).

[seabass-labrax → tialaramex]

Broadly speaking, I agree with the claim - but I'm very suspicious of the study. We'd have to know the methodology to be sure (maybe you have a link to this?), but there are many factors that could lead participants to ignore the warning signs and persevere. For instance, the participants may have been offered a sum of money for their involvement, and believed (consciously or subconsciously) that they had to 'pass' the test to earn it. Or, it could have been pride and the desire not to lose face; perhaps even the sentiment of "the sooner I can finish this daft test, the sooner I can leave"!

There is a common attitude in the computer industry that designers/developers know better than users, but software users are representative of the general population and are thus no more or less intelligent than average. I believe it's primarily a lack of understanding of how software works that makes online phishing scams work. 'Brick Wall UX' can only go so far to compensate for that, and it comes at a cost of making software less flexible for the end-user.

[mananaysiempre → tialaramex]

Jeff Atwood called it the dancing bunnies problem[1].

[1] https://blog.codinghorror.com/the-dancing-bunnies-problem/

[tialaramex → mananaysiempre]

The usual term is "Dancing pigs" rather than bunnies: https://en.wikipedia.org/wiki/Dancing_pigs

But this isn't quite the same thing, the dancing pigs (or bunnies) are an attraction, the mission mindset / get-there-itis happen after the user has decided to do something, and prevent them from (correctly) deciding not to do it in light of more information.

[dotancohen → NtG_UK]

Just wait until you see what crooks can do with Telegram, or Megaupload, or the Linux kernel, or Microsoft Excel.

[samstave → NtG_UK]

Better yet, this creates the ability for prompts such as:

"Using design system from govukvue.org create an app that will [check for service] from [this gov.uk url] using the same hooks and design components to give me a dashboard of [benefits] [contacts_for_benefits] [these_other-compnents_to_query] as a flas app and conect it to my [db] and give me a mobile first view - wrap it in a docker on my DO droplet, use the cred from the .env"

[ggm]

Given Labour won the election, and a need to distinguish this from gov.uk, why not cast the space into a rather fetching, 2nd international respecting Red hue?

[gherard5555 → ggm]

let me choose the color theme... FF0000