Installation
Nuxt
Learn how to install and use Monicon in your Nuxt project
Installation
Install Monicon and its Nuxt module in your Nuxt project:
npm install @monicon/core @monicon/nuxtConfiguration
1. Create Monicon Config
Create a monicon.config.ts file in your project root:
import { , } from "@monicon/core/plugins";
import { } from "@monicon/core";
export default {
// Loads individual icons by icon name
: ["mdi:home", "feather:activity"],
// Loads all icons from the lucide collection
: ["lucide"],
: [
/**
* change the output path to your project config for example;
* - components/icons
* - src/components/icons
*/
({ : ["components/icons"] }),
({ : "components/icons" }),
],
} satisfies ;2. Configure Nuxt
Add the Monicon module to your nuxt.config.ts:
export default defineNuxtConfig({
modules: ["@monicon/nuxt"],
});Usage
After configuration, Monicon will automatically generate Vue components for your icons. You can import and use them in your pages and components:
<script setup lang="ts">
import BadgeCheckIcon from "@/components/icons/lucide/badge-check.vue";
import CloudDownloadIcon from "@/components/icons/lucide/cloud-download.vue";
import HomeIcon from "@/components/icons/mdi/home.vue";
import ActivityIcon from "@/components/icons/feather/activity.vue";
useHead({
title: "Nuxt App",
meta: [{ name: "description", content: "My Nuxt App" }],
});
</script>
<template>
<main class="flex h-screen items-center justify-center gap-4">
<BadgeCheckIcon color="white" width="50" />
<CloudDownloadIcon color="white" width="50" />
<ActivityIcon color="white" width="50" />
<HomeIcon color="white" width="50" />
</main>
</template>