Tipps und Tricks für Nuxt: 10 Wichtige Punkte

Nuxt ist ein mächtiges Framework für Vue-Anwendungen, das viele nützliche Funktionen und Optimierungen bietet. Hier sind zehn Tipps und Tricks, die dir helfen können, das Beste aus Nuxt herauszuholen:

Verwendung von useAsyncData und useFetch

Diese Composables sind essentiell für asynchrone Datenabfragen in Nuxt. Mit useAsyncData kannst du Daten vor dem Rendern der Komponente abrufen.

Beispiel:

<template>
  <div>
    <h1>Verfügbare Instrumente</h1>
    <ul v-if="!pending && !error">
      <li v-for="instrument in instruments" :key="instrument.id">
        {{ instrument.name }}
      </li>
    </ul>
    <p v-if="pending">Lädt...</p>
    <p v-if="error">Fehler: {{ error.message }}</p>
  </div>
</template>

<script setup>
  const { data: instruments, status, error } = useAsyncData(
      'instruments',
      () => fetch('https://api.example.com/instruments')
  );
</script>

Nutzung des key Parameters

Der key Parameter in useAsyncData und useFetch hilft, eindeutige Identifikatoren für abgerufene Daten zu erstellen, um unnötige Datenabfragen zu vermeiden.

Beispiel:

<template>
  <div>
    <select v-model="selectedProject">
      <option v-for="project in projects" :value="project.id" :key="project.id">
        {{ project.name }}
      </option>
    </select>
    <div v-if="pending">Lädt Tracks...</div>
    <div v-else-if="error">{{ error.message }}</div>
    <div v-else>
      <ul>
        <li v-for="track in tracks" :key="track.id">{{ track.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  const selectedProject = ref(1);
  const projects = [
    {id: 1, name: 'Project A'},
    {id: 2, name: 'Project B'},
    {id: 3, name: 'Project C'},
  ];

  const {data: tracks, status, error} = useAsyncData(
      'tracks',
      () => fetch(`https://api.example.com/projects/${selectedProject.value}/tracks`)
  );
</script>

Authentifizierung mit Supabase

Mit Supabase und Nuxt kannst du einfach OAuth-Authentifizierung implementieren.

Beispiel:

const supabase = useSupabaseAuthClient();

const login = async () => {
    const {error} = await supabase.auth.signInWithOAuth({
        provider: 'github',
    });

    if (error) {
        console.error(error);
        // Fehlerbehandlung, z.B. eine Benachrichtigung anzeigen
    }
};

Nuxi CLI Befehle

Nutze die Nuxi CLI für verschiedene Aufgaben, wie das Erstellen neuer Projekte, Hinzufügen von Modulen und mehr.

Beispiel:

npx nuxi init my-project
npx nuxi add component MyComponent

Extrahieren und Optimieren von CSS

Optimiere CSS-Dateien, um die Ladezeiten zu verkürzen.

Beispiel:

// nuxt.config.js
export default {
    build: {
        extractCSS: true
    }
}

Lazy Loading von Bildern

Lade Bilder erst, wenn sie sichtbar sind, um die Leistung zu verbessern.

Beispiel:

<template>
  <div>
    <img v-lazy="imageSrc" alt="Lazy Loaded Image">
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  const imageSrc = ref('/path/to/image.jpg');
</script>

Verwendung von WebP-Format für Bilder

Konfiguriere Nuxt, um Bilder im WebP-Format zu liefern.

Beispiel:

// nuxt.config.js
export default {
    image: {
        formats: {
            webp: {
                quality: 80
            }
        }
    }
}

Optimierung des SSR-Bundle

Reduziere die Bundle-Größe, indem du unnötige Konsolenlogs entfernst.

Beispiel:

// nuxt.config.js
export default {
    build: {
        terser: {
            terserOptions: {
                compress: {
                    drop_console: true
                }
            }
        }
    }
}

Preload und Prefetch von Assets

Verwende und , um wichtige Assets vorab zu laden.

Beispiel:

<template>
  <div>
    <link rel="preload" href="/path/to/asset.js" as="script">
    <link rel="prefetch" href="/path/to/asset.css" as="style">
  </div>
</template>

Infinite Scrolling

Implementiere Infinite Scrolling für eine bessere Benutzererfahrung.

Beispiel:

<template>
  <div>
    <h2>Firmen</h2>
    <ul>
      <li v-for="company in companies" :key="company.id" v-text="company.name"></li>
    </ul>
    <div v-if="pending">Lädt...</div>
    <button @click="loadMore()">Mehr laden</button>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  const page = ref(1);
  const lastPage = ref(1);
  const companies = ref([]);
  const pending = ref(false);

  onMounted(() => {
    loadCompanies();
  });

  const loadMore = () => {
    if (page.value + 1 <= lastPage.value) {
      page.value++;
      loadCompanies();
    }
  };

  const loadCompanies = () => {
    pending.value = true;
    $fetch(`/api/v1/companies`, {
      method: 'GET',
      baseURL: 'https://api.roastandbrew.coffee',
      params: {page: page.value}
    }).then(response => {
      companies.value.push(...response.data);
      pending.value = false;
      lastPage.value = response.last_page;
    });
  };
</script>

Mit diesen Tipps und Tricks bist du bestens gerüstet, um deine Nuxt3-Projekte zu optimieren und effizient zu gestalten. Viel Erfolg beim Programmieren!

Happy Nuxting! ✨