0

Can someone help with setting up Heroicons in combination with Nuxt 3?

I ran the following command:

yarn add @heroicons/vue

I also added @heroicons/vue as following to my nuxt.config.js:

    build: {
        transpile: ["@headlessui/vue", "@heroicons/vue"],
        postcss: {
            plugins: {
                tailwindcss: {},
                autoprefixer: {},
            },
        },
    },

But I can't seem to make it work at all.

Could you tell me what I have to do?

Joris1Jansen
  • 100
  • 1
  • 7
  • Give a try to that one: https://stackoverflow.com/a/72055404/8816585 – kissu Dec 04 '22 at 16:07
  • And I will advise you to use this library `nuxt-icon` https://github.com/nuxt-modules/icon. You can use this library with icons from https://icones.js.org/. They have all heroicons and 100k+ more. – Mises Dec 04 '22 at 16:13
  • Rather than worrying to install a brand new library and struggle with each specific one. – kissu Dec 04 '22 at 16:15

2 Answers2

1

Tailwindcss and Nuxt

first you should ,install tailwind package:

npm install -D tailwindcss postcss autoprefixer

then generate tailwind cona fig file:

npx tailwindcss init

Add Tailwind to your PostCSS configuration

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

then inside your tailwind.config.js Configure your template paths:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./pages/index.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

! if you set srcDir correct the paths

then add the Tailwind directives to your CSS:

  1. add main.css file to your assets with this content:

  2. Add main.css the CSS file globally

main.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

nuxt.config.js

css: ['~/assets/css/main.css'],

finally you can use tailwind.

final nuxt.config.js file :

export default defineNuxtConfig({
css: ["@/assets/styles/main.scss"],
  postcss: {
    plugins: {
      "postcss-import": {},
      "tailwindcss/nesting": {},
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

Heroicons and Nuxt

First, you should install Heroicons package:

npm install @heroicons/vue

then you can use it like this:

<template>
<BeakerIcon class="h-6 w-6 text-blue-500" />
</template>
<script lang="ts" setup>
import { BeakerIcon } from "@heroicons/vue/24/solid";
</script>

The 24x24 outline icons can be imported from @heroicons/vue/24/outline, the 24x24 solid icons can be imported from @heroicons/vue/24/solid, and the 20x20 solid icons can be imported from @heroicons/vue/20/solid.

learn more here: https://github.com/tailwindlabs/heroicons#vue

but try nuxt-icon library :)

sadeq shahmoradi
  • 1,395
  • 1
  • 6
  • 22
  • Thanks for answering! Weird thing is that it still doesn't work after following your steps on a fresh project... This is the GitHub repo, maybe you could spot the mistake:https://github.com/tpotjj/qt-www But to me everything looks ok... – Joris1Jansen Dec 04 '22 at 19:36
  • Never mind, I just realized that I was probably using an outdated way of creating a Nuxt application. Everything works fine with the new way of setting up the project, there is just some old documentation I guess? – Joris1Jansen Dec 04 '22 at 20:11
0

Here is how you should set up a nuxt.config.js file together with tailwindcss and nuxt-icon library:

export default defineNuxtConfig({
    modules: ['nuxt-icon'],
    css: ['~/assets/css/main.css'], // css file with @tailwind base etc.
    postcss: {
        plugins: {
            tailwindcss: {},
            autoprefixer: {}
        }
    }
})

Like I wrote in comment, nuxt-icon contains all Heroicons together with 100k + more.

Here is the way you can use this icon library: https://stackoverflow.com/a/73810640/6310260

Mises
  • 4,251
  • 2
  • 19
  • 32
  • Rather just send to the duplicate content than duplicating the answer here. – kissu Dec 04 '22 at 16:24
  • @kissu Ok ill try to find it. – Mises Dec 04 '22 at 16:24
  • I've already did. https://stackoverflow.com/questions/74678254/nuxt-3-with-tailwindcss-heroicons/74678483?noredirect=1#comment131807789_74678254 – kissu Dec 04 '22 at 16:27
  • 1
    @kissu oh yeah, you're right. I still lave it because he's setting up config file with `build: {}` and it's wrong. – Mises Dec 04 '22 at 16:33