Contenta Vue Nuxt

Contenta Vue Nuxt is a boilerplate starter that pairs a headless Drupal 8 backend with a Nuxt.js front end, using the JSON API module to build an SEO-friendly Vue.js site with minimal setup.

What is Contenta Vue Nuxt?

Contenta Vue Nuxt is a Nuxt.js application that consumes the Contenta CMS public API to display a fictional recipes site. It is built for beginners in headless Drupal, keeping the barrier to entry low by avoiding over-engineered architecture. The project runs on Node 10.x and npm 5 or higher, and it provides both a development server with hot reload and a production build pipeline. It is a community example, currently looking for a new maintainer.

Key Features

• SEO-friendly Server Side Rendering — Nuxt.js handles SSR and code splitting automatically, so each page is pre-rendered on the server for search engines without manual configuration.
• JSON API integration — The front end fetches content from Drupal 8's JSON API through functions in the lib directory, which are called from asyncData() on pages.
• Simple directory structure — Only four directories matter: pages, components, layouts, and lib; pages are automatically mapped to URLs (for example, pages/recipes.vue becomes /recipes).
• Unit tests included — A test/unit directory contains tests that you can run with npm test.
• Fictional recipes site demo — The example consumes the Contenta CMS public API and demonstrates fetching recipe content in a Nuxt layout.
• Beginner-focused design — No complex edges cases or directory hierarchies; layouts act like Drupal's page.tpl.php templates.

Who is it for?

• Developers new to headless Drupal — They can see a complete working example where Drupal provides content through JSON API and Nuxt.js renders it.
• Vue.js developers wanting SSR — They can learn how to use Nuxt.js features like asyncData() within a small, real project.
• Drupal site builders evaluating Contenta CMS — This project shows exactly how a Contenta front end is structured and how to fetch public API content.

What can you do with Contenta Vue Nuxt?

• Build a headless recipe site: Clone the repo, run npm install and npm run dev, and the Nuxt app starts on localhost:3000 consuming Contenta's public API.
• Learn asyncData in Nuxt.js: Study how page components fetch JSON API data during server-side rendering in pages and lib.
• Create your own Drupal 8 API consumer: Use the same patterns and directory conventions to point the lib functions at your own Drupal 8 JSON API endpoints.

How does Contenta Vue Nuxt work?

The code is split across pages, components, layouts, and lib. Pages are Nuxt components that trigger SSR and are reachable by their file path; asyncData() loads data from the Contenta API before rendering. Layouts act as wrapper templates around pages, and lib holds the business logic and API-fetching functions that can be called either from components or the Vuex store.

FAQ

What are the requirements to run this starter?

You need Node 10.x and npm 5 or higher. The installation commands are npm install for dependencies, npm run dev to serve with hot reload at localhost:3000, and npm run build followed by npm run start for production.

Is this project actively maintained?

The current maintainer says they are looking for a new maintainer because their interests changed and they no longer work with Contenta. The repository remains available for learning and for anyone who wants to adopt it.

How do I change the dev server port?

Edit the dev script in package.json to include a PORT environment variable, for example set PORT=5000 before running the Nuxt command.