{"id":19335834,"url":"https://github.com/buttercms/buttercms-nuxt","last_synced_at":"2025-02-24T07:43:33.411Z","repository":{"id":40840359,"uuid":"251314542","full_name":"ButterCMS/buttercms-nuxt","owner":"ButterCMS","description":"Nuxt.js starter project integrated with ButterCMS","archived":false,"fork":false,"pushed_at":"2023-03-04T10:08:40.000Z","size":371,"stargazers_count":3,"open_issues_count":14,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-22T17:41:13.656Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ButterCMS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-30T13:33:29.000Z","updated_at":"2023-01-10T12:10:19.000Z","dependencies_parsed_at":"2023-02-14T21:32:07.764Z","dependency_job_id":null,"html_url":"https://github.com/ButterCMS/buttercms-nuxt","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Fbuttercms-nuxt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Fbuttercms-nuxt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Fbuttercms-nuxt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Fbuttercms-nuxt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ButterCMS","download_url":"https://codeload.github.com/ButterCMS/buttercms-nuxt/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240441868,"owners_count":19801791,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T03:09:04.003Z","updated_at":"2025-02-24T07:43:33.353Z","avatar_url":"https://github.com/ButterCMS.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# buttercms-nuxt\n\nNuxt starter project integrated with ButterCMS\n\n## Important Notice\nThis project was created as an example use case of ButterCMS in conjunction with Nuxt.js and will not be actively maintained. \n\nIf you’re interested in exploring the best, most up-to-date way to integrate Butter into frameworks like Nuxt.js, you can check out the following resources:\n\n### Starter Projects\n\nThe following turn-key starters are fully integrated with dynamic sample content from your ButterCMS account, including main menu, pages, blog posts, categories, and tags, all with a beautiful, custom theme with already-implemented search functionality. All of the included sample content is automatically created in your account dashboard when you sign up for a free trial of ButterCMS.\n- [Nuxt.js Starter](https://buttercms.com/starters/nuxtjs-starter-project/)\n- [Angular Starter](https://buttercms.com/starters/angular-starter-project/)\n- [React Starter](https://buttercms.com/starters/react-starter-project/)\n- [Vue.js Starter](https://buttercms.com/starters/vuejs-starter-project/)\n- Or see a list of all our [currently-maintained starters](https://buttercms.com/starters/). (Over a dozen and counting!)\n\n### Other Resources\n- Check out the [official ButterCMS Docs](https://buttercms.com/docs/)\n- Check out the [official ButterCMS API docs](https://buttercms.com/docs/api/)\n\n\n## Install\n\nAdd [ButterCMS NPM module](https://www.npmjs.com/package/buttercms) as a dependency to your existing Nuxt project.\n\nIf you plan to use this project directly, simply execute below commands to get going:\n\n```bash\nnpm i\nnpm run dev\n```\n\nThese commands will install the required dependencies for the project and start the project on your browser.\n\n## Quickstart\n\nTo integrate ButterCMS in your ongoing project, create a service file.\n`plugins/buttercms.js`\n\n```javascript\nconst Butter = require('buttercms')\nexport const butter = Butter('your-api-token')\n```\n\nImport ButterCMS client in your Vue file:\n\n```javascript\nimport { butter } from '~/plugins/buttercms'\n```\n\nYou can then test ButterCMS client by, for example, fetching all of your posts:\n\n```javascript\nbutter.post\n  .list({\n    page: 1,\n    page_size: 10\n  })\n  .then((res) =\u003e {\n    console.log('Content from ButterCMS')\n    console.log(res)\n    this.posts = res.data.data\n  })\n```\n\nThis will fetch you upto 10 blog posts that you would have stored in your ButterCMS account\n\n## Pages\n\n### Get single page\n\nWith your homepage defined, the ButterCMS Pages API will return it in JSON format like this:\n\n```json\n{\n  \"data\": {\n    \"slug\": \"home\",\n    \"page_type\": null,\n    \"fields\": {\n      \"seo_title\": \"Marvellous Vue page powered by ButterCMS\",\n      \"headline\": \"Marvellous Vue page powered by ButterCMS\",\n      \"hero_image\": \"https://cdn.buttercms.com/WjJXN3B6ThWJpucfZM9P\",\n      \"call_to_action\": \"Know more\",\n      \"customer_logo\": \"https://cdn.buttercms.com/PTEqdDBReOq0X08W43sA\"\n    }\n  }\n}\n```\n\nTo integrate this into your app, simply make a call to ButterCMS APIs using the ButterCMS service. Place this call in the `created` lifecycle method:\n`pages/index.vue`\n\n```javascript\nimport { butter } from '~/plugins/buttercms'\nexport default {\n  name: 'customer-page',\n  data() {\n    return {\n      page: {\n        fields: {}\n      }\n    }\n  },\n  methods: {\n    getPage() {\n      butter.page\n        .retrieve('*', 'homepage')\n        .then((res) =\u003e {\n          console.log(res.data)\n          console.log(res.data.data)\n          this.page = res.data.data\n        })\n        .catch((res) =\u003e {\n          console.log(res)\n        })\n    }\n  },\n  created() {\n    this.getPage()\n  }\n}\n```\n\nDisplay the result\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"customer-page\"\u003e\n    \u003cfigure\u003e\n      \u003cimg :src=\"page.fields.hero_image\" /\u003e\n    \u003c/figure\u003e\n    \u003ch1\u003e{{ page.fields.headline }}\u003c/h1\u003e\n    \u003cbutton\u003e{{ page.fields.call_to_action }}\u003c/button\u003e\n\n    \u003ch3\u003eCustomers Love Us!\u003c/h3\u003e\n    \u003c!-- Loop over customer logos --\u003e\n    \u003cimg\n      v-for=\"logo in page.fields.customer_logos\"\n      :key=\"logo.index\"\n      :src=\"logo.logo_image\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n##Get all page content of specific type. For instance, customers for the case study\n`pages/customers/index.vue`\n\n```javascript\nimport { butter } from '~/plugins/buttercms'\nexport default {\n  name: 'customers-home',\n  data() {\n    return {\n      page_title: 'Customers',\n      // Create array to hold the pages from ButterCMS API\n      pages: []\n    }\n  },\n  methods: {\n    // Get List of Customer Pages\n    getPages() {\n      butter.page.list('case_study').then((res) =\u003e {\n        // console.log(res.data.data) // Check the results in the console\n        this.pages = res.data.data\n      })\n    }\n  },\n  created() {\n    // Fire on page creation\n    this.getPages()\n  }\n}\n```\n\nDisplay the result\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"customers-home\"\u003e\n    \u003ch1\u003e{{ page_title }}\u003c/h1\u003e\n    \u003cdiv v-for=\"(page, index) in pages\" :key=\"index\"\u003e\n      \u003crouter-link :to=\"'/customers/' + page.slug\"\u003e\n        \u003cdiv\u003e\n          \u003cimg class=\"customer-image\" :src=\"page.fields.customer_logo\" alt=\"\" /\u003e\n          \u003ch2\u003e{{ page.fields.headline }}\u003c/h2\u003e\n        \u003c/div\u003e\n      \u003c/router-link\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n##Viewing specific page of a specific type\nBelow code create a customer component that displays the details of the customer.\n\n`pages/customers/_slug.vue`\n\n```javascript\nimport { butter } from '~/plugins/buttercms'\nexport default {\n  name: 'customer-page',\n  data() {\n    return {\n      slug: this.$route.params.slug,\n      page: {\n        slug: '',\n        fields: {}\n      }\n    }\n  },\n  methods: {\n    getPage() {\n      butter.page\n        .retrieve('case_study', this.slug)\n        .then((res) =\u003e {\n          // console.log(res.data.data)\n          this.page = res.data.data\n        })\n        .catch((res) =\u003e {\n          console.log(res)\n        })\n    }\n  },\n  created() {\n    this.getPage()\n  }\n}\n```\n\nDisplay the result\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"customer-page\"\u003e\n    \u003cfigure\u003e\n      \u003cimg class=\"customer-image\" :src=\"page.fields.customer_logo\" /\u003e\n    \u003c/figure\u003e\n    \u003ch1\u003e{{ page.fields.headline }}\u003c/h1\u003e\n    \u003ch3\u003eTestimonials\u003c/h3\u003e\n    \u003cdiv v-html=\"page.fields.testimonial\"\u003e\u003c/div\u003e\n    \u003cdiv v-html=\"page.fields.body\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Blog Engine\n\n### Display posts\n\nTo display posts we create a simple /blog route in our app and fetch blog posts from the Butter API. See our [API reference](https://buttercms.com/docs/api/) for additional options such as filtering by category or author. The response also includes some metadata we'll use for pagination.\n\nTo retrieve the blog posts using ButterCMS client, you can use the function `butter.post.list({})`\n\n`pages/blog/index.vue`\n\n```javascript\nimport { butter } from '~/plugins/buttercms'\nexport default {\n  name: 'blog-home',\n  data() {\n    return {\n      page_title: 'Blog',\n      posts: []\n    }\n  },\n  methods: {\n    getPosts() {\n      butter.post\n        .list({\n          page: 1,\n          page_size: 10\n        })\n        .then((res) =\u003e {\n          // console.log(res.data)\n          this.posts = res.data.data\n        })\n    }\n  },\n  created() {\n    this.getPosts()\n  }\n}\n```\n\nDisplay the result\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"blog-home\"\u003e\n    \u003ch1\u003e{{ page_title }}\u003c/h1\u003e\n    \u003c!-- Create v-for and apply a key for Vue. Example is using a combination of the slug and index --\u003e\n    \u003cdiv v-for=\"(post,index) in posts\" :key=\"post.slug + '_' + index\"\u003e\n      \u003crouter-link :to=\"'/blog/' + post.slug\"\u003e\n        \u003carticle class=\"media\"\u003e\n          \u003cfigure\u003e\n            \u003c!-- Bind results using a ':' --\u003e\n            \u003c!-- Use a v-if/else if their is a featured_image --\u003e\n            \u003cimg v-if=\"post.featured_image\" :src=\"post.featured_image\" alt=\"\" /\u003e\n            \u003cimg v-else src=\"http://via.placeholder.com/250x250\" alt=\"\" /\u003e\n          \u003c/figure\u003e\n          \u003ch2\u003e{{ post.title }}\u003c/h2\u003e\n          \u003cp\u003e{{ post.summary }}\u003c/p\u003e\n        \u003c/article\u003e\n      \u003c/router-link\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nTo display a complete post, you can use the `butter.post.retrieve(\u003curl\u003e)` method. See a full list of available post properties in our [API reference](https://buttercms.com/docs/api/).\n\n`pages/blog/_slug.vue`\n\n```javascript\nimport { butter } from '~/plugins/buttercms'\nexport default {\n  name: 'blog-post',\n  data() {\n    return {\n      post: {\n        data: {\n          author: {}\n        },\n        meta: {}\n      }\n    }\n  },\n  methods: {\n    getPost() {\n      butter.post\n        .retrieve(this.$route.params.slug)\n        .then((res) =\u003e {\n          console.log(res.data)\n          this.post = res.data\n        })\n        .catch((res) =\u003e {\n          console.log(res)\n        })\n    }\n  },\n  watch: {\n    $route(to, from) {\n      this.getPost()\n    }\n  },\n  created() {\n    this.getPost()\n  }\n}\n```\n\nDisplay the result\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"blog-post\"\u003e\n    \u003ch1\u003e{{ post.data.title }}\u003c/h1\u003e\n    \u003ch4\u003e{{ post.data.author.first_name }} {{ post.data.author.last_name }}\u003c/h4\u003e\n    \u003cdiv v-html=\"post.data.body\"\u003e\u003c/div\u003e\n\n    \u003crouter-link\n      v-if=\"post.meta.previous_post\"\n      :to=\"/blog/ + post.meta.previous_post.slug\"\n      class=\"button\"\n    \u003e\n      {{ post.meta.previous_post.title }}\n    \u003c/router-link\u003e\n    \u003crouter-link\n      v-if=\"post.meta.next_post\"\n      :to=\"/blog/ + post.meta.next_post.slug\"\n      class=\"button\"\n    \u003e\n      {{ post.meta.next_post.title }}\n    \u003c/router-link\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Categories, Tags, and Authors\n\nUse Butter's APIs for categories, tags, and authors to feature and filter content on your blog:\n\n### List all categories and get posts by category\n\nCall these methods on the `created()` lifecycle hook\n\n```javascript\nmethods: {\n  ...\n  getCategories() {\n    butter.category.list()\n      .then((res) =\u003e {\n        console.log('List of Categories:')\n        console.log(res.data.data)\n      })\n  },\n  getPostsByCategory() {\n    butter.category.retrieve('example-category', {\n        include: 'recent_posts'\n      })\n      .then((res) =\u003e {\n        console.log('Posts with specific category:')\n        console.log(res)\n      })\n  }\n},\ncreated() {\n  ...\n  this.getCategories()\n  this.getPostsByCategory()\n}\n```\n\n## RSS, Atom, and Sitemap\n\nButter generates RSS, Atom, and sitemap XML markup. To use these on your blog, return the generated XML from the Butter API with the proper content type headers.\n\nWe can fetch the RSS, Atom, and Sitemap feeds using the ButterCMS API, and pipe the response to routes on our server. Create the `/sitemap`, `/rss`, and `/atom` routes inside `server.js`\n\n```javascript\nserver.get('/sitemap', (req, res) =\u003e {\n  butter.feed.retrieve('sitemap').then((s) =\u003e {\n    res.send(s.data.data)\n  })\n})\n\nserver.get('/atom', (req, res) =\u003e {\n  butter.feed.retrieve('atom').then((s) =\u003e {\n    res.send(s.data.data)\n  })\n})\n\nserver.get('/rss', (req, res) =\u003e {\n  butter.feed.retrieve('rss').then((s) =\u003e {\n    res.send(s.data.data)\n  })\n})\n```\n\nThese routes will also update dynamically, everytime new content is added, or updated.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuttercms%2Fbuttercms-nuxt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuttercms%2Fbuttercms-nuxt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuttercms%2Fbuttercms-nuxt/lists"}