Nuxt Cheatsheet

Bases & syntaxe

Créer un nouveau projet Nuxt

npx create-nuxt-app <project-name>

Crée un nouveau projet Nuxt.js avec les options préconfigurées.

Structure de base d'un composant Vue dans Nuxt

<template>
  <div>
    <!-- Mon composant -->
  </div>
</template>

<script>
export default {
  name: 'MonComposant',
}
</script>

<style scoped>
/* Styles spécifiques au composant */
</style>

Définit la structure de base d'un composant Vue.js dans Nuxt.

Utiliser une route dynamique

<template>
  <div>
    Hello, $route.params.id!
  </div>
</template>

<script>
export default {
  name: 'DynamicRoute',
}
</script>

Affiche le paramètre dynamique d'une route.

Structures de données

Utiliser Axios pour les requêtes HTTP

<template>
  <ul>
    <li v-for="user in users" :key="user.id">user.name</li>
  </ul>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      users: []
    }
  },
  async asyncData({ params }) {
    const { data } = await axios.get(`https://api.example.com/users/${params.id}`)
    return { users: data }
  }
}
</script>

Effectue une requête HTTP à l'aide d'Axios.

Fonctions & méthodes essentielles

Utiliser la méthode mapState pour accéder aux états Vuex

<template>
  <div>count</div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  }
}
</script>

Accède à un état Vuex dans le composant.

Patterns courants

Utiliser asyncData pour récupérer des données au moment de l'initialisation du composant

<template>
  <div>data</div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const { data } = await $axios.get('https://api.example.com/data')
    return { data }
  }
}
</script>

Récupère des données de manière asynchrone au moment de l'initialisation du composant.

Operations avancees

Utiliser Vuex pour la gestion d'états global

// store/index.js
export const state = () => ({
  count: 0
})

export const mutations = {
  increment(state) {
    state.count++
  }
}

export const actions = {
  increment({ commit }) {
    commit('increment')
  }
}

Gère les états global avec Vuex.

Debugging & outils

Utiliser console.log pour déboguer

<template>
  <div @click="logData">message</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Click me'
    }
  },
  methods: {
    logData() {
      console.log(this.message)
    }
  }
}
</script>

Utilise console.log pour déboguer les données.

Utiliser Vue Devtools pour inspecter les composants

https://devtools.vuejs.org/guide/

Permet d'inspecter et de manipuler les composants Vue.js.

Utiliser ESLint avec Prettier pour la formattage du code

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

Configure ESLint avec Prettier pour un formatage cohérent du code.