Skip to content
A starter scaffolding based on Nuxt, PostCSS and Contentful headless CMS
JavaScript Vue CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
components
layouts
middleware
pages
plugins
static Updare linters prettier and README Jul 28, 2019
store
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.nvmrc
.prettierrc
.stylelintignore
.stylelintrc
.yarnrc
README.md
contentful.config.json
nuxt.config.js
package.json
yarn.lock

README.md

image

This starter allows you to easily connect your nuxt application with the Contentful headless CMS. It also provides some basic configurations.

Configured Tools

  • Nuxt
  • PostCSS with some plugins
  • Prettier
  • Eslint
  • Stylelint

Getting started

You can use degit to download the scaffolding directly from Github:

npx degit equinusocio/nuxt-contentful-starter my-new-project

Configure

After cloning the repo, create an .env file at the project root, then add the required contentful keys:

CTF_SPACE_ID=""
CTF_CDA_ACCESS_TOKEN=""

The config file is git ignored by default, but MAKE SURE TO NOT ADD IT ACCIDENTALLY TO THE REPOSITORY.

Deploying with Now

If you want to deploy your nuxt site on Zeit domains with Now, you have to care about few things to make it work:

  • Add the required now script "now-build": "nuxt generate" to the package.json
  • Don't set the buildDir option inside nuxt.config.js
  • If you're importing local modules/files from outside the static/ folder (like custom plugins, modules..) make sure to add them to your now.json serverFiles using the correct builder:
{
  "version": 2,
  "builds": [{
    "src": "nuxt.config.js",
    "use": "@nuxtjs/now-builder",
    "config": {
      "serverFiles": ["myModules/**", "plugins/**", "package.json"]
    }
  }]
}

Contentful client usage (example)

You can use the nuxt asyncData function to get data from Contentful:

<script>
  import { createClient } from '~/plugins/contentful.js'
  const client = createClient()

  export default {
    async asyncData({ env }) {
      try {
        let getPosts = await client.getEntries({
          content_type: 'blogPost',
          order: '-sys.createdAt'
        });
        return {
          posts: getPosts.items
        };
      } catch (e) {
        console.error(e)
      }
    }
  }
</script>
You can’t perform that action at this time.