Configuration

Configure Uno Admin with the uno property in app.config.ts.

Minimal app.config.ts
export default defineAppConfig({
  uno: {
    title: 'Uno Admin',
    description: 'My Uno Admin Project',
  }
})
Complete app.config.ts
export default defineAppConfig({
  uno: {
    /**
     * Website title, used as header default title and meta title.
     */
    title: "Uno Admin",
    /**
     * Website description, used for meta description.
     */
    description:
      "Free modular admin template, based on NuxtJs and Nuxt UI, carefully crafted and ready for production ",
    /**
     * Header logo
     */
    logo: {
      /**
       * Path of the logo
       */
      path: "/logo.svg",
      /**
       * Path of the logo in dark mode.
       *
       * Leave it empty if you want to use the same logo.
       *
       */
      pathDark: "/logo-dark.svg",
      /**
       * Alt description for the image.
       */
      alt: "Uno Admin logo",
    },
    /*
     * Enable the colorPicker component in toolbar, which allows the user to select the theme's default color
     */
    colorPicker: true,
    /*
     * Enable the toggleDarkMode component toolba,  which allows the user to select the theme's default color
     */
    toggleDarkMode: true,
    /*
     * Add a item in Application Sidebar.
     * @type  [{
     * label: string;
     * icon?: string;
     * img?: string;
     * to: string;
     * order: number;
     * rules:{
     *  subject: string;
     *  action: string
     * }
     * }]
     */
    sidebarMenuItems: <SidebarMenuItems[]>[],
  },
});
Each of these settings can be overridden in a feature. Access create new feature for learn more.

Add a Sidebar Item

To add a sidebar item, include an object in the sidebarMenuItem property in the uno configuration within app.config.ts.

Hello World!
app.config.ts
export default defineAppConfig({
  uno: {
    sidebarMenuItems:{
      label: 'My Item';
      icon?: 'i-heroicons-home';
    }
  }
})
KeyTypeDescription
labelstring
iconstringItem icon, if the img property is defined this will be deprecated. You can use any name from the https://icones.js.org collection such as the i- prefix
imgstring?Path of a image
tostring?Item link, can be a external url or internal application path
ordernumberIndicates the order in which the item will appear
rules
subjectThe subject or subject type which you want to check user action on. Usually this is a business (or domain) entity (e.g., Subscription, Article, User).
actionDescribes what user can actually do in the app. User action is a word (usually a verb) which depends on the business logic (e.g., prolong, read).
For learn more about rules check access control section