These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.
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.
Integrating Nuxt.js with Strapi creates a powerful combination for building fast, scalable web applications.
Here’s why this integration is a great choice:
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.
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.
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']
}
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 }
})
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
}
}
}
}
`
}
}
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'
}
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.
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.
To get started, you'll first need to set up content types in Strapi:
Configure API permissions in Strapi:
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 }
}
}
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>
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) }
]
}
}
}
1
2
3
4
5
6
<nuxt-img
:src="post.attributes.featuredImage.data.attributes.url"
:alt="post.attributes.title"
width="800"
height="400"
/>
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.
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.