Installation

Installing Mod in a Nuxt.js App

How to install Mod for use in a Nuxt.js app.

To use Mod with Nuxt.js, you will want to decide how you want Mod's files loaded in your app. There are two options:

Global

This will load Mod's CSS and JavaScript globally in your app for all pages.

Global CSS and ESM JavaScript

This will load Mod's CSS globally and set up your JavaScript to load via ESM. This is the recommended approach for Nuxt.js sites.

Using Global CSS and JavaScript

To start installing Mod in your app, first, you'll want to copy the required Mod files into your app. Use the table below to know where files should go:

Paths for Plus Users

If you've purchased a copy of Mod Plus, you will want to use the plus file variants (e.g., mod-light-plus.min.css) below.

Type	File in mod(-plus).zip	Target path in app	What is it?
File	mod-light(-plus).min.css	public/css/mod-light(-plus).min.css	The light-themed version of Mod.
File	mod-dark(-plus).min.css	public/css/mod-dark(-plus).min.css	The dark-themed version of Mod.
File	mod(-plus).iife.min.js	public/js/mod(-plus).iife.min.js	The IIFE version of the JavaScript for Mod's interactive components. Use this if you want to load Mod's JavaScript globally in your app.
File	fonts/lucide.woff2	public/fonts/lucide.woff2	The icon font used by Mod, Lucide.
File	fonts/mod-brand-icons.woff2	public/fonts/mod-brand-icons.woff2	The icon font for brand logos used by Mod.

Once you have the files copied over to your app, next, we'll want to create and register a plugin for retrieving a theme cookie from the browser so we can easily switch between Mod's themes:

plugins/mod.server.ts

export default defineNuxtPlugin((nuxt_app) => {
  if (process.server) {
    const theme_cookie = useCookie('theme');
    const theme = theme_cookie.value || 'light';
    
    nuxt_app.vueApp.use(() => {
      useHead({
        link: [
          {
            rel: 'preconnect',
            href: 'https://fonts.googleapis.com'
          },
          {
            rel: 'preconnect',
            href: 'https://fonts.gstatic.com',
            crossorigin: ''
          },
          {
            rel: 'stylesheet',
            href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'
          },
          {
            rel: 'stylesheet',
            href: `/css/mod-${theme}(-plus).min.css`,
          }
        ],
        script: [{
          src: `/js/mod(-plus).iife.min.js`,
        }],
        bodyAttrs: {
          'data-mod-theme': theme,
        }
      })
    })
  }
});

To set up our plugin, we export a call to defineNuxtPlugin(), passing a function that will define our plugins behavior. Inside, we first check to see if our plugin is running on the server via process.server. Next, if we are, we call to the useCookie() hook, passing theme to retrieve the theme cookie from the browser (if available). Next, we define a variable theme that stores either the value of the found cookie, or, if it doesn't exist, a default value of light.

After this, we call to nuxt_app.vueApp.use() and inside, call to the useHead() hook to modify our page's base HTML template (in Nuxt.js apps, this is done entirely through configuration—not editing an HTML file). To it, we pass an object that defines the changes we want to make to our base HTML.

Here, we first add the required Google Fonts preconnect and stylesheet tags to load Mod's font, Inter.

Then, we specify that we want to add a <link> tag for Mod's CSS, using a template literal string to allow us to dynamically change the theme we want to load based on the theme variable we set above.

After this, we also add a script array which contains the path to Mod's JavaScript file in our /public/js folder.

Finally, we set the data-mod-theme attribute on the <body> tag. This is required as Mod's CSS is theme-scoped and will not work without this.

Once you have your plugin defined, next, we need to register it with Nuxt.js:

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  plugins: [
    '~/plugins/mod.server.ts',
  ],
});

Above, we just need to reference the path to our plugin when passing it as a string in the plugins array (the tilde ~ is just an alias for the root path for our app).

Once all of this is complete, Mod should be loaded globally in your Nuxt.js app. If you have a page that uses Mod components that rely on JavaScript, you can include it directly in your page:

components/Page.vue

<template>
  <div class="mod-command-palette">
    <!-- HTML for Mod's command palette component -->
  </div>
</template>

<script setup>
  onMounted(() => {
    if (window.mod) {
      window.mod.command_palette();
    }
  });
</script>

After we've defined the HTML for our page inside of the <template> tag, next, we define a script tag, setting an attribute of setup to tell Nuxt.js that this contains the setup code for our Vue component.

Inside, we call to the onMounted() lifecycle method, and to that, we pass a function that checks to see if window.mod is defined, and if it is, calls to window.mod.command_palette();.

Using Global CSS and ESM JavaScript