Content Manager

--- title: Nuxt group: guides weight: 20 --- This guide will walk you through how to integrate Netlify CMS with Nuxt. ## Starting With `create-nuxt-app` Follow the instructions on the [Nuxt documentation](https://nuxtjs.org/guide/installation#using-code-create-nuxt-app-code-) for creating a new project, or run: ```bash npx create-nuxt-app cd npm run dev ``` ## Setting Up Netlify CMS ### Add the Netlify CMS files to Nuxt In the `static/` directory, create a new directory `admin/`. Inside that directory you'll create two files, your `index.html` and a `config.yml`. Per the [Netlify CMS documentation](/docs/add-to-your-site/), we'll set the content of `static/admin/index.html` to the following: ```html Content Manager ``` For your `static/admin/config.yml` file, you can put in a basic starter config: ```yaml backend: name: git-gateway branch: master media_folder: static/img public_folder: /img collections: - name: 'blog' label: 'Blog' format: 'json' folder: 'content/blog' create: true slug: '{{year}}-{{month}}-{{day}}-{{slug}}' editor: preview: false fields: - { label: 'Title', name: 'title', widget: 'string' } - { label: 'Publish Date', name: 'date', widget: 'datetime' } - { label: 'Description', name: 'description', widget: 'string' } - { label: 'Body', name: 'body', widget: 'markdown' } ``` You can build whatever collections and content modeling you want. The important thing to note is the `format: 'json'` value on each collection. This is important for consuming content in Nuxt. ### Add the `content/` directory to Nuxt In your root directory, you can create a new directory `content/`. As you might guess, this is where our content will live. Your filesystem should look about like this, so far: ```sh root/ ├ content/ ├ components/ ├ layouts/ ├ middleware/ ├ pages/ ├ plugins/ ├ static/ │ └ admin/ │ ├ index.html │ └ config.yml ├ store/ └ // .editorconfig, .gitignore, nuxt.config.js, etc... ``` ### Pushing to GitHub It's now time to commit your changes and push to GitHub. `create-nuxt-app` initializes Git automatically for you, so you only need to do: ```bash git add . git commit -m "Initial Commit" git remote add origin https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git git push -u origin master ``` ### Deploying With Netlify Now you can go ahead and deploy to Netlify. Go to your Netlify dashboard and click **[New site from Git](https://app.netlify.com/start)**. Select the repo you just created. Under **Basic build settings**, you can set the build command to `npm run generate` . Set the publish directory to `dist`. Click **Deploy site** to get the process going. ### Authenticating with Netlify Identity **Add the Netlify Identity Widget** You've already added the Netlify Identity widget to our `admin/index.html`. The next thing to do is add the Netlify Identity widget to our site's index page. In `pages/index.vue`, we can add the following to the page ` ``` ### Example Blog Post To generate blog posts create _slug.vue file in the pages folder. by using `$content` you would get a json which you can use to display. But if you are using `markdown` to write your posts you can use `` module which gives you option to edit content on page in dev mode and many more [features](<>). ```javascript ``` ### Generating pages with the `generate` property Since Nuxt 2.13+, nuxt export has a crawler feature integrated which will crawl all your links and generate your routes based on those links. Therefore you do not need to do anything in order for your dynamic routes to be crawled. i.e, if you are on version of nuxt above 2.14 add target as static in nuxt.config.js and use `nuxt generate` to build your static site. ```javascript // nuxt.config.js target: 'static' ``` If you are using nuxt version below 2.14 you have to use generate option in nuxt/content module to generate pages ```javascript //nux.config.js export default { modules: [, '@nuxt/content' ], generate: { async routes () { const { $content } = require('@nuxt/content') const files = await $content().only(['path']).fetch() return files.map(file => file.path === '/index' ? '/' : file.path) } } } ``` To render your site as a static site, you'll need to create or update the `generate` property in `nuxt.config.js` to create dynamic routes and provide their content as a `payload`. In `generate`, make your `routes` entry a function: ```javascript export default { generate: { routes: function() { const fs = require('fs'); const path = require('path'); return fs.readdirSync('./content/blog').map(file => { return { route: `/blog/${path.parse(file).name}`, // Return the slug payload: require(`./content/blog/${file}`), }; }); }, }, }; ``` To see the generated site, navigate to name-of-your-website.netlify.app/blog

{{ post.title }}