This website requires JavaScript.

Nuxt

Pages & Routing

// pages/index.vue - Auto-generated route: /
<template>
  <div>Home Page</div>
</template>

// pages/users/[id].vue - Dynamic route: /users/:id
<script setup>
const route = useRoute()
const id = route.params.id
</script>

Data Fetching

<script setup>
// Composable for data fetching
const { data: users } = await useFetch('/api/users')

// With options
const { data: posts } = await useFetch('/api/posts', {
  lazy: true,
  watch: true,
  transform: (posts) => posts.map(post => ({
    ...post,
    title: post.title.toUpperCase()
  }))
})
---------------------------------------------------------
// Dont Initial HTML , Dont Fetch On Initial Client Load
const {data, execute} = await useAsyncData(()=>{/*...*/} , {immediate: false})
//later on
execute()
---------------------------------------------------------
//Dont Initial HTML , But Fetch On Initial Client Load (Block Client Side Nav)
const {data } = await useAsyncData(()=> /*...*/ , {server: false})
---------------------------------------------------------
// Initial on HTML , Don't Block During Client Navigation
const {data,pending} = await useAsyncData(()=>/*...*/ , {lazy:true})
---------------------------------------------------------
//Initial on HTML ,Block During Client Navigation (Block Client Side Nav)
const {data} = await useAsyncData (() => /*...*/, {//Other Options})
</script>

State Management

// composables/useState.ts
export const useCounter = () => useState('counter', () => 0)

// Component usage
<script setup>
const counter = useCounter()
</script>

Middleware

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const user = useUser()
  if (!user.value && to.path !== '/login') {
    return navigateTo('/login')
  }
})

🔧 Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      title: 'My Nuxt App',
      meta: [
        { name: 'description', content: 'My amazing Nuxt application' }
      ]
    }
  },
  modules: [
    '@nuxtjs/tailwindcss',
    '@pinia/nuxt'
  ],
  css: ['~/assets/css/main.css'],
  runtimeConfig: {
    public: {
      apiBase: process.env.API_BASE
    }
  }
})
Suggest improve•Raise issue
Node
React