How to add Pico.css to your Nuxt 3 application

Published on 25 Jan 2023

Building a quick prototype should be easy, and, well, quick. I am currently exploring headless CMS options for a project at work and need to do some testing to see if a particular CMS solution will do the trick for us.

I want to build a barebones prototype using the Javascript framework I am most comfortable with, which is Nuxt.

First, get a Nuxt 3 app up and running. If you're no sure how to do this, please check out their documentation site.

I wanted to use Pico.css, because it's minimal and easy to get a good looking prototype up and running. I am used to TailwindCSS's way of doing things and that's just too much right now.

First, install Pico.css using npm

npm install @picocss/pico

Then, in your Nuxt project root, add an assets directory with an empty CSS file. I've added one in


Next, you have to add the following line in the CSS file:

@import url('@picocss/pico/css/pico.slim.css)

I used the slim build, because I want this prototype as lightweight as possible.

Finally, run your build script npm run dev (or whatever you're using and you should be able to start using Pico.css in your project.