Frontend Academy · Lesson

Nuxt Modules: Image Auth i18n

Install and configure @nuxt/image for optimised images, @nuxtjs/auth-next for authentication, and @nuxtjs/i18n for internationalisation.

Nuxt Modules: Image Auth i18n is a free Frontend Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Are Nuxt Modules?

Modules are the official extension mechanism for Nuxt. They install in nuxt.config.ts and hook into the build, runtime, and dev server. Most ecosystem features are modules.

Installing a Module

npm install the module, then add it to modules in nuxt.config.ts.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/image',
    '@sidebase/nuxt-auth',
    '@nuxtjs/i18n'
  ]
});

@nuxt/image

Replaces <img> with optimised <NuxtImg> — auto-format (WebP/AVIF), responsive srcset, lazy loading, CDN integration.

<template>
  <NuxtImg
    src="/photos/sunset.jpg"
    alt="Sunset"
    width="800"
    height="600"
    format="webp"
    loading="lazy"
    sizes="sm:100vw md:50vw lg:800px"
  />
</template>

NuxtPicture for Art Direction

<NuxtPicture> generates a <picture> element with multiple <source> tags for art direction.

<NuxtPicture src="/hero.jpg" alt="" :imgAttrs="{ width: 1200, height: 600 }" />

Image Provider Configuration

Configure a CDN provider (Cloudinary, imgix, Vercel, etc.) so all images route through it.

export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    provider: 'cloudinary',
    cloudinary: { baseURL: 'https://res.cloudinary.com/yourname/image/fetch/' }
  }
});

@sidebase/nuxt-auth (Auth)

Auth module with multiple providers: NextAuth-compatible OAuth, local credentials, custom flows.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@sidebase/nuxt-auth'],
  auth: {
    baseURL: process.env.AUTH_ORIGIN,
    provider: { type: 'authjs' }
  }
});

Using Auth in Pages

The useAuth() composable exposes session, status, and signIn/signOut.

<script setup>
const { data: session, status, signIn, signOut } = useAuth();
</script>

<template>
  <button v-if="status === 'unauthenticated'" @click="signIn('github')">
    Sign in with GitHub
  </button>
  <div v-else>
    Welcome, {{ session.user.name }}
    <button @click="signOut">Sign out</button>
  </div>
</template>

Protecting Routes with Middleware

Use the auth middleware on a page to require authentication.

<script setup>
definePageMeta({ middleware: 'auth' });
</script>

@nuxtjs/i18n (Internationalisation)

The official i18n module supports multiple languages, locale-prefixed routes, lazy-loaded translation files, and SEO-friendly hreflang.

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: [
      { code: 'en', file: 'en.json' },
      { code: 'tr', file: 'tr.json' }
    ],
    defaultLocale: 'en',
    lazy: true,
    langDir: 'locales/'
  }
});

Translating in Components

Use $t in templates or useI18n in setup.

<script setup>
const { t, locale } = useI18n();
</script>

<template>
  <h1>{{ $t('welcome') }}</h1>
  <p>{{ t('greeting', { name: 'Alice' }) }}</p>
  <button @click="locale = locale === 'en' ? 'tr' : 'en'">
    {{ $t('switch_lang') }}
  </button>
</template>

Locale-Prefixed Routes

URLs become /en/about, /tr/about. Use localePath('/about') to generate correctly prefixed links.

<NuxtLink :to="localePath('/profile')">{{ $t('profile') }}</NuxtLink>

Other Popular Modules

@pinia/nuxt (state management), @vueuse/nuxt (200+ composables), @nuxtjs/tailwindcss (Tailwind setup), @nuxtjs/color-mode (dark mode), @nuxt/content (file-based CMS).

Writing a Custom Module

For internal monorepo functionality, write a module that hooks into the Nuxt lifecycle. Modules are powerful: register components, runtime config, server routes, build steps.

Quick Check

Which Nuxt 3 module provides optimised image loading with automatic WebP/AVIF and responsive srcset?

Recap: Nuxt Modules

Modules extend Nuxt — installed via the modules array in nuxt.config.ts. @nuxt/image for optimised pictures (auto-format, srcset, lazy). @sidebase/nuxt-auth (or nuxt-auth) for authentication. @nuxtjs/i18n for translations and locale-prefixed routes. Also: @pinia/nuxt, @vueuse/nuxt, @nuxtjs/tailwindcss, @nuxt/content. Write custom modules for internal reuse.

Frequently asked questions

Is the “Nuxt Modules: Image Auth i18n” lesson free?

Yes — the full text of “Nuxt Modules: Image Auth i18n” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “Nuxt Modules: Image Auth i18n”?

Install and configure @nuxt/image for optimised images, @nuxtjs/auth-next for authentication, and @nuxtjs/i18n for internationalisation. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Nuxt Modules: Image Auth i18n” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Frontend Academy