From 8d404a0d54dfb985ecde05ea11d3416645199a28 Mon Sep 17 00:00:00 2001 From: Henry Desroches Date: Thu, 5 Sep 2019 14:01:02 -0600 Subject: [PATCH] docs: add Nuxt guide (#2614) --- website/content/docs/nuxt.md | 260 +++++++++++++++++++++++++++++++++++ 1 file changed, 260 insertions(+) create mode 100644 website/content/docs/nuxt.md diff --git a/website/content/docs/nuxt.md b/website/content/docs/nuxt.md new file mode 100644 index 00000000..4feb1aca --- /dev/null +++ b/website/content/docs/nuxt.md @@ -0,0 +1,260 @@ +--- +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: + +```sh +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: + +```yml +backend: + name: git-gateway + branch: master + +media_folder: static/img +public_folder: /img + +collections: + - name: 'blog' + label: 'Blog' + folder: 'assets/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 `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 `