Configuration

package.json

You should either update or remove the following fields in the package.json file with your project details:

• name
• description
• contributors
• main

Nuxt Modules

The template has the following modules installed by default:

• @nuxt/scripts
• @vueuse/nuxt
• @nuxt/eslint - (Inherited from the @nobears-front-end/nuxt-ui layer)
• @nuxt/ui - (Inherited from the @nobears-front-end/nuxt-ui layer)

Linting

In the eslint.config.js file you will find a custom factory function provided by our @nobears-front-end/eslint package. You can use this to create your own ESLint configuration for your project based on the antfu presets.

Theming

We use of the @nuxt/ui module as the basis / starting point for our components and theming system, this module in turn uses Tailwind CSS v4 for handling the css.

Nuxt UI

You can configure Nuxt UI in the app.config.ts file under the ui key.

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'blue',
      // ...
    },
    icons: {
      // In our UI layer, the default icons are changed to the Phosphor icon alternatives.
    },
  }
})

CSS

Theming files

Since Tailwind CSS v4, the theming/ configuration has been moved to regular css files. You can find all the default variables (some values are overridden) along with our custom variables in their respective files, in the /assets/css/theme folder.

Typography

In our design system, we use the namespace text for all our body text, the namespace display is used for titles and headings.

The tailwind text-* utilities are made up of the following properties, which can be configured in css:

--text-{size}
--text-{size}--font-weight
--text-{size}--letter-spacing
--text-{size}--line-height

@theme {
  /* Used for our body text */
  --text-base: 1rem; /* 16px */
  --text-base--line-height: 1.5rem; /* 24px */
  
  /*  */
  --text-display: 1.875rem; /* 30px */
  --text-display--line-height: 2.4375rem; /* 39px */
  --text-display--font-weight: 800;
}

Semantic colors alternative

It's always a struggle to update global styles such as typescales, background colors, etc. There is a simple solution for this: Design Tokens.

If you've never heard of them before, take a look at the Atlassian Design Tokens documentation, which gives a great overview of what they are, why they are useful and how to use them.

In order to make it as easy as possible to use, maintain them and ensure consistency across our projects, we've added default configurations for these tokens in the /assets/css/theme/semantic-alternatives folder. If it's decided that the project should use these tokens, don't forget to remove the colors.css import in the assets/css/theme/index.css file.

/* Uncomment the imports if you decide to use the semantic colors */
/* @import "./colors/palette.css";
@import "./optional/background.css";
@import "./optional/border.css";
@import "./optional/text.css";
@import "./optional/foreground.css"; */

@import "...";
@import "./colors.css"; /* Remove this line if you decide to use the semantic colors */
@import "...";

SEO

If you want to use the @nuxtjs/seo module, you will need to install it manually since it's neither installed by the template, nor by the @nobears-front-end/nuxt-ui layer.

robots.txt

We've also included a empty robots.txt file in the public folder, you can use this to control the search engine indexing of your website. Have a look at the Nuxt SEO Robots documentation for more information.

Favicon

As an example, you will find the NOBEARS favicon in the public/favicon folder. This favicon is generated using the Real Favicon Generator tool, we highly recommend and somewhat insist you generate your own favicon with the same tool.

Analysis and validation

In addition to generation, you can also make sure your favicon is correctly setup (and generate a report) using the same tool.

To generate a report of your favicon, you can either use the Favicon Checker on the generator website, or use the terminal:

npx realfavicon check 3000

# View the report in the browser
npx realfavicon check https://example.com

# Or view the report directly in the terminal
npx realfavicon check -s cli https://example.com