--- 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], 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: 'assets/content/blog' create: true slug: '{{year}}-{{month}}-{{day}}-{{slug}}' format: 'json' 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 `assets/` 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/ ├ assets/ │ └ 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 `yarn generate` and 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 `