How to install nuxt.js for a starter theme

Nuxt.js is a powerful framework built on top of Vue.js, offering server-side rendering (SSR), static site generation (SSG), and many other features out of the box. It’s an excellent choice for building modern web applications with great performance, SEO, and flexibility.

This guide will walk you through the steps to install nuxt.js for a starter theme.

1. Prerequisites

Before we begin, ensure you have the following installed on your machine:

• Node.js (v16 or above): You can download it from Node.js official site.
• npm or Yarn: These are package managers that will handle dependencies. npm is included with Node.js, while Yarn can be installed via npm (npm install -g yarn).
• Git: Version control to manage your project. Install it from Git official site.

2. Install Nuxt.js

Step 1: Create a New Nuxt.js Project

Open your terminal and run the following command to create a new Nuxt project:

npx nuxi init nuxt-starter-theme

Alternatively, if you’re using Yarn, you can run:

yarn create nuxt-app nuxt-starter-theme

This will generate a new folder called nuxt-starter-theme with the starter template.

Step 2: Navigate to the Project Folder

Move into the newly created project folder:

cd nuxt-starter-theme

Step 3: Install Dependencies

After navigating to the project folder, install the necessary dependencies by running:

npm install

or if you’re using Yarn:

yarn install

This will install all the dependencies needed for the Nuxt project.

3. Run the Development Server

Once everything is installed, you can start your Nuxt.js development server to preview your theme:

npm run dev

or:

yarn dev

This command starts a development server at http://localhost:3000, where you can see your new Nuxt.js project in action.

4. Project Structure Overview

Your newly created project will have the following structure:

nuxt-starter-theme/
│
├── assets/        # Uncompiled assets like styles or images
├── components/    # Vue.js components
├── layouts/       # Application layouts
├── pages/         # Your app's pages (automatically routed)
├── plugins/       # Vue.js plugins
├── static/        # Static files (directly served)
├── store/         # Vuex store (optional)
├── nuxt.config.ts # Nuxt configuration
└── package.json   # Project dependencies and scripts

Key directories and their functions:

• pages/: Any .vue file inside the pages directory becomes a route in your Nuxt.js app.
• layouts/: Define custom layouts (like default, error, etc.).
• components/: Vue.js components that are reusable across your app.

5. Nuxt.js Configuration

Your nuxt.config.ts or nuxt.config.js file controls various settings for your project. Here’s a sample of what it might look like:

export default defineNuxtConfig({
  ssr: true,   // Enable Server-Side Rendering
  target: 'static',  // For static site generation
  css: [
    '@/assets/css/main.css'  // Add global CSS files
  ],
  modules: [
    '@nuxtjs/axios',  // Add modules here
  ],
  axios: {
    baseURL: '/'  // API URL for Axios requests
  }
})

6. Add a Custom Theme

To start customizing the theme, you can modify or add new components, styles, and layouts.

For example, create a custom layout in the layouts/ directory:

<!-- layouts/default.vue -->
<template>
  <div>
    <header>
      <h1>My Custom Nuxt Theme</h1>
    </header>
    <Nuxt />
  </div>
</template>

<style scoped>
header {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
}
</style>

This layout will wrap all your pages, and you can design it as needed.

7. Deploying the Nuxt.js Project

Once you are done developing your starter theme, you can deploy it by generating static files or deploying to a server.

For Static Site Generation (SSG):

Run the following command to generate static files:

npm run generate

or

yarn generate

This will create a dist/ folder containing all the generated static files. You can deploy these to any static hosting platform like Netlify, Vercel, or GitHub Pages.

For Server-Side Rendering (SSR):

If you are deploying an SSR Nuxt.js app, you’ll need a Node.js server. You can run the build command:

npm run build

or

yarn build

Then, start your production server:

npm run start

or

yarn start

8. Conclusion

Nuxt.js is a versatile framework that simplifies building both static and server-side rendered applications. In this tutorial, you’ve learned how to set up Nuxt.js for a starter theme, run a development server, understand the project structure, and customize it for your needs.

You’re now ready to start building your theme and take advantage of Nuxt.js’s powerful features!