Adding USWDS CSS to Existing Vue3 Project

[jlkravitz]

Not an issue per say, but any chance someone has an example of setting up USWDS CSS files with node on an existing Vue3 project? I'm having trouble getting it to work, and the "compiler" module that USWDS doesn't seem relevant for my use-case (though I might be wrong). Any pointers appreciated!

[patrickcate]

This is beyond the scope of this library since there are so many different ways to implement this depending on your build system and requirements. That said, here's some ideas that might help.

I assume since you mentioned the USWDS compile library that you want to compile from the USWDS Sass files and not just use the default compiled library CSS.

• You can use the USWDS compile library, but it uses Gulp for the build system so it would be a separate build process from using Vite or Vue CLI to compile your Vue project.
  • If you're new to using Sass w/ Vite or Vue CLI this might not be a bad option to just get started. Then you'll just have a compiled css file you can add to your Vue project.
• Either way you'll need to add USWDS to you node project as a dependency. See https://designsystem.digital.gov/documentation/getting-started/developers/phase-one-install/ for more info.
• You'll need to create a Sass entry point file to import the USWDS Sass files and modify settings: https://designsystem.digital.gov/documentation/settings/
• Both Vite and Vue CLI have instructions on how to add Sass support. With these you can use Sass in your Vue style block's to import your Sass entry point file, or other Sass files.
  • https://vitejs.dev/guide/features.html#css-pre-processors
  • https://cli.vuejs.org/guide/css.html#pre-processors

Something like:

// /src/App.vue 

<style lang="scss">
@import '../assets/styles.scss';
</style>

[jlkravitz]

Got it! I couldn't figure out how to get the Sass files to work but for now, the default CSS should be ok - which is working!

Relatedly, is there a way to view the code for the examples in the documentation?

On Sat, Jan 28, 2023 at 11:15 AM Patrick Cate @.***> wrote:

This is beyond the scope of this library since there are so many different ways to implement this depending on your build system and requirements. That said, here's some ideas that might help.

I assume since you mentioned the USWDS compile library https://github.com/uswds/uswds-compile that you want to compile from the USWDS Sass files and not just use the default compiled library CSS.

• You can use the USWDS compile library, but it uses Gulp for the build system so it would be a separate build process from using Vite or Vue CLI to compile your Vue project.
  • If you're new to using Sass w/ Vite or Vue CLI this might not be a bad option to just get started. Then you'll just have a compiled css file you can add to your Vue project.
• Either way you'll need to add USWDS to you node project as a dependency. See https://designsystem.digital.gov/documentation/getting-started/developers/phase-one-install/ for more info.
• You'll need to create a Sass entry point file to import the USWDS Sass files and modify settings: https://designsystem.digital.gov/documentation/settings/
• Both Vite and Vue CLI have instructions on how to add Sass support. With these you can use Sass in your Vue style block's to import your Sass entry point file, or other Sass files.
  • https://vitejs.dev/guide/features.html#css-pre-processors
  • https://cli.vuejs.org/guide/css.html#pre-processors

Something like:

// /src/App.vue <style @.*** '../assets/styles.scss';

— Reply to this email directly, view it on GitHub https://github.com/patrickcate/vue-uswds/issues/555#issuecomment-1407430947, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAWWZK2EG27FDE7GKSYRIIDWUVA35ANCNFSM6AAAAAAUI56WZY . You are receiving this because you authored the thread.Message ID: @.***>

-- Sent from iPhone

[patrickcate]

Relatedly, is there a way to view the code for the examples in the documentation?

Yes, the documentation uses Storybook. In the repo's /src/components/ folder, each component is in its own folder. In those folders there is a *.stories.js files with the Storybook code for that component.