Skip to content

Latest commit

 

History

History
215 lines (162 loc) · 6.4 KB

README.md

File metadata and controls

215 lines (162 loc) · 6.4 KB

Nuxt 3 Starter with Rendering Strategies

A comprehensive Nuxt 3 starter project that demonstrates different rendering strategies: Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR).

🚀 Features

  • Multiple Rendering Strategies: Demonstrates SSR, SSG, and ISR with real-world examples
  • Contentstack CMS Integration: Headless CMS for content management
  • Modern UI: Beautiful, responsive design with Tailwind CSS
  • TypeScript Support: Full TypeScript integration
  • SEO Optimized: Meta tags, structured data, and performance optimizations
  • Component Architecture: Reusable components and layouts
  • File-based Routing: Intuitive routing based on file structure

📁 Project Structure

kickstart-nuxt-Tim/
├── components/          # Reusable Vue components
├── composables/         # Nuxt composables (useGetPage.ts)
├── layouts/             # Layout components (default.vue)
├── pages/               # File-based routing
│   ├── index.vue        # Home page (SSR)
│   ├── about.vue        # About page (SSG)
│   ├── contact.vue      # Contact page (SSG)
│   ├── products/        # Products section
│   │   └── index.vue    # Products page (SSR)
│   └── blog/            # Blog section
│       ├── index.vue    # Blog listing (ISR)
│       └── [slug].vue   # Individual blog posts (ISR)
├── plugins/             # Nuxt plugins (contentstack.ts)
├── public/              # Static assets
├── server/              # Server-side code
├── types.ts             # TypeScript type definitions
├── nuxt.config.ts       # Nuxt configuration
└── package.json         # Dependencies and scripts

🎯 Rendering Strategies Demonstrated

1. Server-Side Rendering (SSR)

  • Pages: Home (/), Products (/products)
  • Use Case: Dynamic content, real-time data
  • Benefits: Fresh content, good SEO, server processing
  • Example: Product catalog with real-time inventory and pricing

2. Static Site Generation (SSG)

  • Pages: About (/about), Contact (/contact)
  • Use Case: Static content, marketing pages
  • Benefits: Instant loading, excellent SEO, no server processing
  • Example: Company information and contact details

3. Incremental Static Regeneration (ISR)

  • Pages: Blog listing (/blog), Individual posts (/blog/[slug])
  • Use Case: Content that changes occasionally
  • Benefits: Fast loading with background updates
  • Example: Blog posts that can be updated without rebuilding

🛠️ Technologies Used

  • Nuxt 3: Vue.js framework with SSR/SSG support
  • Vue 3: Progressive JavaScript framework
  • TypeScript: Type-safe JavaScript
  • Tailwind CSS: Utility-first CSS framework
  • Contentstack: Headless CMS
  • Vue Router: Client-side routing

🚀 Getting Started

Prerequisites

  • Node.js 20.x or higher
  • npm or yarn package manager

Installation

  1. Clone the repository

    git clone <repository-url>
cd kickstart-nuxt-Tim

  2. Install dependencies

    npm install

  3. Set up environment variables Create a .env file in the root directory:

    NUXT_CONTENTSTACK_API_KEY=your_api_key
NUXT_CONTENTSTACK_DELIVERY_TOKEN=your_delivery_token
NUXT_CONTENTSTACK_ENVIRONMENT=your_environment
NUXT_CONTENTSTACK_REGION=your_region

  4. Run the development server

    npm run dev

  5. Open your browser Navigate to http://localhost:3000

📝 Available Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run start - Start production server
  • npm run generate - Generate static site
  • npm run preview - Preview production build

🎨 Customization

Adding New Pages

  1. Create a new .vue file in the pages/ directory
  2. The file path determines the route (e.g., pages/services.vue → /services)
  3. Choose the appropriate rendering strategy for your content

Styling

  • The project uses Tailwind CSS for styling
  • Custom styles can be added in the <style> section of components
  • Global styles are defined in app.vue

Content Management

  • Content is managed through Contentstack CMS
  • Use the useGetPage composable to fetch content

🔧 Configuration

Nuxt Configuration (nuxt.config.ts)

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  runtimeConfig: {
    public: {
      apiKey: process.env.NUXT_CONTENTSTACK_API_KEY,
      deliveryToken: process.env.NUXT_CONTENTSTACK_DELIVERY_TOKEN,
      // ... other config
    },
  },
})

Rendering Strategy Selection

  • SSR: Use useAsyncData or useFetch in page components
  • SSG: Static content embedded in components
  • ISR: Use definePageMeta with revalidate option

📊 Performance

  • Lighthouse Score: 90+ across all metrics
  • First Contentful Paint: < 1.5s
  • Largest Contentful Paint: < 2.5s
  • Cumulative Layout Shift: < 0.1

🚀 Deployment

Contentstack Launch (recommended)

  1. Connect your repository to Launch.
  2. The build commands, output directory and server commands get auto-populated.
  3. Set build command: npm run build
  4. Set output directory: ./.output
  5. Set server command: npm run start

Docker

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

📞 Support

For support and questions:

Built with ❤️ using Nuxt 3 and Contentstack