{"id":19335824,"url":"https://github.com/buttercms/buttercms-vue-3-tutorial","last_synced_at":"2026-03-19T09:20:53.197Z","repository":{"id":48079853,"uuid":"371491297","full_name":"ButterCMS/buttercms-vue-3-tutorial","owner":"ButterCMS","description":"Tutorial for integrating Vue 3 and ButterCMS","archived":false,"fork":false,"pushed_at":"2022-12-15T17:30:07.000Z","size":414,"stargazers_count":0,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-01-29T22:35:45.723Z","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":"2021-05-27T20:05:16.000Z","updated_at":"2022-12-15T17:30:12.000Z","dependencies_parsed_at":"2023-01-29T04:01:16.154Z","dependency_job_id":null,"html_url":"https://github.com/ButterCMS/buttercms-vue-3-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ButterCMS/buttercms-vue-3-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Fbuttercms-vue-3-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Fbuttercms-vue-3-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Fbuttercms-vue-3-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Fbuttercms-vue-3-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ButterCMS","download_url":"https://codeload.github.com/ButterCMS/buttercms-vue-3-tutorial/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ButterCMS%2Fbuttercms-vue-3-tutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29889610,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T08:34:21.514Z","status":"ssl_error","status_checked_at":"2026-02-27T08:32:38.035Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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:02.115Z","updated_at":"2026-02-27T09:40:50.636Z","avatar_url":"https://github.com/ButterCMS.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CMS-powered application built with Vue 3\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/butterCMS/buttercms-vue-3-tutorial)\n\n[Vue.js](https://v3.vuejs.org/) is a progressive framework for building user interfaces.\n\n[ButterCMS](https://buttercms.com) is a hosted API-based CMS and blog engine that lets you build CMS-powered apps using any programming language. You can think of Butter as similar to WordPress except that you build your website in your language of choice and then plug-in the dynamic content using an API.\n\nThis projects shows how to integrate ButterCMS into Vue.js application:\n\n- How to create page with a list of blog posts and pages for each post. Learn more about blog integration [here](https://buttercms.com/docs/api/#get-your-blog-posts).\n- How to dynamically create pages using data from ButterCMS pages. Learn more about fetching single pages and pages with types [here](https://buttercms.com/docs/api/#pages).\n- How to display collections items on the page. Learn more on how to query collections [here](https://buttercms.com/docs/api/#retrieve-a-collection).\n- How to get all posts categories. Learn more about categories [here](https://buttercms.com/docs/api/#categories).\n- How to create pages with RSS, Atom, and Sitemap feeds. Learn more [here](https://buttercms.com/docs/api/#feeds).\n\nLink to ButterCMS API documentation is https://buttercms.com/docs/api/.\n\n## Important Notice\nThis project was created as an example use case of ButterCMS and Vue.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 javascript frameworks like Vue, 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- [Vue.js Starter](https://buttercms.com/starters/vuejs-starter-project/)\n- [Angular Starter](https://buttercms.com/starters/angular-starter-project/)\n- [React Starter](https://buttercms.com/starters/react-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## Set up ButterCMS account\n\n1. Create a free account on ButterCMS - https://buttercms.com/.\n2. To see the project locally you need to create this data in your account:\n   - Create and publish customer case study pages (page with type `customer_case_study`) with this structure:\n     ![customer case study page type configuration](https://buttercms.com/static/images/docs/guides/PagesNewPageType1Gridsome.png)\n     Learn more about page types [here](https://buttercms.com/docs/api-client/vuejs#PagesPageType).\n   - Create collection `faq_items` with this structure:\n     ![faq items collection configuration](images/faq_items.png)\n     Learn more about collections [here](https://buttercms.com/docs/api-client/vuejs#Collections).\n3. Find your read API token from the home page or from settings page, it will be needed later.\n\n## Requirements\n\n- Node \u003e= 12.0.0\n\n## Running project locally\n\n1. Clone and cd into project:\n\n```\ngit clone https://github.com/ButterCMS/buttercms-vue-3-tutorial.git\ncd buttercms-vue-3-tutorial\n```\n\n2. Install all dependencies\n\n```\nnpm install\n```\n\nor\n\n```\nyarn install\n```\n\n1. Copy `.env.example` file as `.env` and replace `VUE_APP_BUTTER_CMS_API_KEY` value with your read API token\n2. Run the app in development mode\n\n```\nnpm run serve\n```\n\nor\n\n```\nyarn serve\n```\n\nThe application should be available at `http://localhost:8080`.\n\nTo build the project run `npm run build`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuttercms%2Fbuttercms-vue-3-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuttercms%2Fbuttercms-vue-3-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuttercms%2Fbuttercms-vue-3-tutorial/lists"}