These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

What Is Nuxt.js

Nuxt.js is an open-source framework built on Vue.js that simplifies modern web application development. It supports server-side rendering (SSR), static site generation (SSG), and single-page application (SPA) features, which makes it a versatile tool for fast, SEO-friendly websites.

Nuxt.js automatically manages routing, code splitting, and hot module reloading to improve the developer experience. It also seamlessly integrates with back-end services via REST and GraphQL APIs. Thanks to its modular architecture, Nuxt.js allows easy functionality extension and performance optimization, making it ideal for building scalable, dynamic web applications.

Why Integrate Nuxt.js with Strapi

Integrating Nuxt.js with Strapi creates a powerful combination for building fast, scalable web applications.

Here’s why this integration is a great choice:

• Seamless Content Management: Strapi is a headless CMS that provides an intuitive interface for managing content. Nuxt.js consumes this content via REST or GraphQL APIs.
• High Performance: Nuxt.js’s SSR and SSG improve SEO and loading times, ensuring your app is fast and search engine optimized.
• Decoupled Architecture: Separating the front-end (Nuxt.js) from the back-end (Strapi) offers flexibility to deliver content across multiple platforms, including web, mobile, or IoT.
• Scalability: Both Nuxt.js and Strapi are built for scalability. Strapi’s API-driven model scales your content, while Nuxt.js seamlessly handles increasing traffic.
• Streamlined Development: Nuxt.js supports automatic code splitting and hot module reloading to boost developer productivity. Strapi’s extensible architecture allows for easy customization and plugin integration.

How to Integrate Nuxt.js with Strapi

Integrating Nuxt.js with Strapi creates a powerful setup for building dynamic, content-driven websites. If you’re new to headless CMS, our headless CMS guide can help clarify the concepts before you begin.

1. Set Up the Strapi Backend

To create a new Strapi project, run:

1
npx create-strapi-app@latest my-project --quickstart

Once installation is complete, open http://localhost:1337/admin in your browser. Here, you can set up your content types and configure API permissions.

2. Set Up the Nuxt.js Frontend

Create a new Nuxt.js project with:

1
npx nuxi init my-nuxt-frontend

Next, install the Strapi module for Nuxt.js:

1
npm install @nuxtjs/strapi

Register the module and configure it in your nuxt.config.js file:

1
2
3
4
5
6
7
8
modules: [
  '@nuxtjs/strapi'
],

strapi: {
  url: process.env.STRAPI_URL || 'http://localhost:1337/api',
  entities: ['articles', 'categories']
}

3. Connect Nuxt.js to Strapi’s REST API

In the Strapi admin panel, go to Settings → Roles & Permissions and adjust permissions so your Nuxt.js frontend can access the necessary content types.

To fetch data from Strapi in Nuxt.js, use the $strapi service. For example, to fetch articles:

1
2
3
4
5
6
export default {
  async asyncData({ $strapi }) {
    const articles = await $strapi.find('articles')
    return { articles }
  }
}

For more complex queries, you can use filters, sorting, and pagination:

1
2
3
4
5
6
const featuredArticles = await $strapi.find('articles', {
  filters: { featured: true },
  populate: '*',
  sort: 'publishedAt:desc',
  pagination: { page: 1, pageSize: 10 }
})

4. (Optional) Integrate GraphQL

To enable GraphQL in Strapi, install the plugin:

1
npm install @strapi/plugin-graphql

For more details, see the Strapi GraphQL setup guide.

To use GraphQL in Nuxt.js, install Apollo dependencies:

1
npm install @nuxtjs/apollo graphql

Configure Apollo in your nuxt.config.js:

1
2
3
4
5
6
7
8
9
10
modules: [
  '@nuxtjs/apollo',
],
apollo: {
  clientConfigs: {
    default: {
      httpEndpoint: 'http://localhost:1337/graphql'
    }
  }
}

You can now create and use GraphQL queries in your components:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import gql from 'graphql-tag'

export default {
  apollo: {
    articles: gql`
      query {
        articles {
          data {
            id
            attributes {
              title
              content
            }
          }
        }
      }
    `
  }
}

5. Advanced Configuration

For authentication, use the built-in methods provided by the Nuxt Strapi module:

1
await this.$strapi.login({ identifier: 'user@example.com', password: 'password' })

For more on authentication and authorization, see the Strapi authentication guide.

When working with media, construct full URLs by combining the Strapi base URL and the media path:

1
2
3
getMediaUrl(mediaPath) {
  return `${this.$strapi.url}${mediaPath}`
}

To manage environment variables in Nuxt.js, use the following in your nuxt.config.js:

1
2
3
4
// nuxt.config.js
env: {
  strapiBaseUri: process.env.API_URL || 'http://localhost:1337'
}

6. Follow Best Practices for Production

• Implement error handling, security measures, and query optimization.
• Use caching strategies and a CDN for optimized content delivery as your app scales.
  Learn how to use a CDN with Strapi.

By following these steps, you’ll have a Nuxt.js frontend seamlessly connected to a Strapi backend, ready for scalable and content-rich web applications.

Project Example (GitHub Project Repo)

This guide walks through a practical example of integrating Nuxt.js with Strapi to create a dynamic blog platform. It highlights how Strapi’s content management capabilities and Nuxt.js’s rendering features combine to build a fast, SEO-friendly website.

For another practical example, you can learn how to build a News Aggregator App using Strapi and Nuxt.js.

Content Type Creation in Strapi

To get started, you'll first need to set up content types in Strapi:

1. Post: The main content type for blog articles.
   • Fields: Title (Text), Content (Rich Text), Author (Relation to User), PublishDate (Date), Featured Image (Media)
2. Category: To organize blog posts.
   • Fields: Name (Text), Description (Text)
3. Tag: For additional classification.
   • Fields: Name (Text)

API Configuration

Configure API permissions in Strapi:

1. Go to Settings > Roles & Permissions > Public
2. Enable "find" and "findOne" permissions for Post, Category, and Tag content types
3. Save your changes

Data Fetching in Nuxt.js

Set up your Nuxt.js project to fetch data from Strapi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// plugins/strapi.js
import { strapi } from '@strapi/client';

const client = strapi({ baseURL: 'http://localhost:1337/api' });

// nuxt.config.js
export default {
  plugins: ['~/plugins/strapi'],
  // ... other configurations
}

// pages/index.vue
export default {
  async asyncData({ $strapi }) {
    const posts = await $strapi.$get('/posts?populate=*')
    return { posts: posts.data }
  }
}

Rendering Content Dynamically

Render your data in Nuxt.js components:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- components/PostList.vue -->
<template>
  <div>
    <article v-for="post in posts" :key="post.id">
      <h2>{{ post.attributes.title }}</h2>
      <img :src="post.attributes.featuredImage.data.attributes.url" :alt="post.attributes.title">
      <p>{{ post.attributes.content.substring(0, 150) }}...</p>
      <nuxt-link :to="`/post/${post.id}`">Read more</nuxt-link>
    </article>
  </div>
</template>

<script>
export default {
  props: ['posts']
}
</script>

Key Integration Highlights

1. Dynamic Routing: Nuxt.js automatically generates routes based on your project's file and folder structure. You can configure these routes to display Strapi content by manually creating route files and fetching data from Strapi.
2. SEO: Use Nuxt's head method to set meta tags based on Strapi content:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// pages/post/_id.vue
export default {
  async asyncData({ $strapi, params }) {
    const post = await $strapi.$get(`/posts/${params.id}?populate=*`)
    return { post: post.data }
  },
  head() {
    return {
      title: this.post.attributes.title,
      meta: [
        { hid: 'description', name: 'description', content: this.post.attributes.content.substring(0, 160) }
      ]
    }
  }
}

3. Image Handling: Use Nuxt Image for optimized image loading:

1
2
3
4
5
6
<nuxt-img
  :src="post.attributes.featuredImage.data.attributes.url"
  :alt="post.attributes.title"
  width="800"
  height="400"
/>

4. GraphQL Integration: For complex data needs, use Strapi's GraphQL API:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// With Apollo module
export default {
  apollo: {
    posts: gql`
      query {
        posts {
          data {
            id
            attributes {
              title
              content
            }
          }
        }
      }
    `
  }
}

This example shows the flexibility, performance, and SEO benefits of integrating Nuxt.js with Strapi. You can efficiently build dynamic, scalable web applications by combining Strapi’s content management with Nuxt.js’s rendering and routing capabilities.

Check out Strapi’s GitHub repository for the current code and best practices.

Strapi Open Office Hours

If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours, Monday through Friday, from 12:30 pm to 1:30 pm CST: Strapi Discord Open Office Hours.

For more details, visit the Strapi documentation and the Nuxt.js documentation.

Frequently Asked Questions (FAQs)