{"id":16795385,"url":"https://github.com/wojtekthewebdev/nuxt-headless-cms","last_synced_at":"2025-03-17T03:14:08.000Z","repository":{"id":44898768,"uuid":"356617932","full_name":"WojtekTheWebDev/Nuxt-Headless-CMS","owner":"WojtekTheWebDev","description":"Nuxt Headless CMS is a template for personal websites and blogs. The project was made with Nuxt.js and Contentful as a headless CMS and Vuetify as a UI framework.","archived":false,"fork":false,"pushed_at":"2022-01-19T22:34:23.000Z","size":227,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-23T12:46:43.128Z","etag":null,"topics":["cms","contentful","nuxt","vuetify"],"latest_commit_sha":null,"homepage":"https://nuxt-headless-cms.herokuapp.com/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WojtekTheWebDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-04-10T15:12:18.000Z","updated_at":"2023-11-22T13:23:21.000Z","dependencies_parsed_at":"2022-09-16T03:40:30.765Z","dependency_job_id":null,"html_url":"https://github.com/WojtekTheWebDev/Nuxt-Headless-CMS","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/WojtekTheWebDev%2FNuxt-Headless-CMS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WojtekTheWebDev%2FNuxt-Headless-CMS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WojtekTheWebDev%2FNuxt-Headless-CMS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WojtekTheWebDev%2FNuxt-Headless-CMS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WojtekTheWebDev","download_url":"https://codeload.github.com/WojtekTheWebDev/Nuxt-Headless-CMS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243965779,"owners_count":20375918,"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":["cms","contentful","nuxt","vuetify"],"created_at":"2024-10-13T09:16:13.167Z","updated_at":"2025-03-17T03:14:07.979Z","avatar_url":"https://github.com/WojtekTheWebDev.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nuxt Headless CMS\n\n**Nuxt Headless CMS** is a template for personal websites and blogs. \nThe project was made with [Nuxt.js](https://nuxtjs.org/) and [Contentful](https://www.contentful.com/) as a headless CMS and [Vuetify](https://vuetifyjs.com/) as a UI framework.\n\n- Build your pages and manage dynamically in the Contentful\n- Configure routes, logo and page icon in the Contentful\n- Manage meta title and meta description for SEO improvement\n- Implement multiple locales with [nuxt/i18n](https://i18n.nuxtjs.org/)\n\nDocumentation can be found [here](https://nuxt-headless-cms.herokuapp.com/documentation).\n\n## Getting started\n\nPreparation of the project requires few \n\n### Contentful setup\n\nFor this step it is necessary to have an acount on [Contentful](https://www.contentful.com/) (free for personal usage) and Contentful CLI [installed](https://www.contentful.com/developers/docs/tutorials/cli/installation/) and [authenticated](https://www.contentful.com/developers/docs/tutorials/cli/authentication/).\n\n1. In the project there is prepaired export file with all content models. To import it use Contentful CLI [space import](https://www.contentful.com/developers/docs/tutorials/cli/import-and-export/) \n```bash\ncontentful space import --space-id YOUR_SPACE_ID --content-file ./contentful-export.json --content-model-only --skip-locales\n```\n2. Verify if last line of import message was ```The import was successful.```\n3. Log in to your contentful space and check your content models. Right now, there are 13 content models.\n4. Prepare locales in Contentful app. Open ```Settings \u003e Locales```, add locales with ```Add locale``` button and set some locale falbacks on locale edit page.\n5. Create page content for home page\n6. Create config content for main page config. **Important note: There should be only 1 config content**\n7. Done!\n\nDescription of all content models and it's fields with examples is still being built, but it will be [here](https://nuxt-headless-cms.herokuapp.com/).\n\n### Project setup\n\n1. Clone this project or download from github and unzip it\n2. Install all dependencies with ```yarn install``` or ```npm install```\n3. Connect project with Contentful by creating environment variables or add information directly in ```nuxt.config.js``` file.\n```js\n(...)\nenv: {\n    contentfulSpace: process.env.CONTENTFUL_SPACE || YOUR_CONTENTFUL_SPACE_ID,\n    contentfulEnv: process.env.CONTENTFUL_ENV || 'master',\n    contentfulToken: process.env.CONTENTFUL_TOKEN || YOUR_CONTENTFUL_ACCESS_TOKEN,\n    pageContentModel: process.env.CONTENTFUL_PAGE_CONTENT_MODEL || 'page',\n    configContentModel: process.env.CONTENTFUL_CONFIG_CONTENT_MODEL || 'config',\n    contentfulIncludeLevel: process.env.CONTENTFUL_INCLUDE_LEVEL || 10\n  },\n(...)\n```\n4. Run development mode with ```yarn dev``` or ```npm run dev``` or production mode with ```yarn start``` or ```npm run start```\n5. Done!\n\n## Live demo\n\nLive demo and documentation with examples and guides: [https://nuxt-headless-cms.herokuapp.com/](https://nuxt-headless-cms.herokuapp.com/)\n\n## Customization\n\nThis project has an option to change theme style and add new content blocks and manage them in the Contentful app \n\n### Styling\n\nTo change theme style open ```nuxt.config.js``` file and modify vuetify theme\n```js\n(...)\n// Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify\n  vuetify: {\n    customVariables: ['~/assets/variables.scss'],\n    defaultAssets: {\n      // Global font style\n      font: {\n        family: 'Quicksand'\n      }\n    },\n    treeShake: true,\n    theme: {\n      dark: false,\n      options: { customProperties: true },\n      // Below you can customize theme colors\n      themes: {\n        light: {\n          primary: '#f0db4f',\n          secondary: '#323330',\n          info: '#2196F3',\n          anchor: '#f0db4f',\n\n          // Backgrounds\n          lightBackground: '#ffffff',\n          darkBackground: '#141414',\n          headerBackground: '#141414',\n          footerBackground: '#141414'\n        }\n      }\n    }\n  },\n(...)\n```\n\n### New content blocks\n\nTo create new content block:\n1. Create new content model in Contentful app\n2. Modify Section's content blocks field validation - Add new content block to list of accepted entry types\n3. Add it to sections content\n4. Create new component in ```components/cms/``` directory with props based on new content model's fields\n5. Open ```helpers/CMS.js``` file\n6. Import new component\n```js\nimport NewComponent from '@/components/cms/NewComponent'\n```\n7. Add new component's case to ```parseCMSBlock``` function\n```js\n(...)\ncase 'contentModelName':\n  return {\n    component: NewComponent,\n    name: contentBlock.fields?.name,\n    props: {\n      field1: contentBlock.fields?.field1,\n      field2: contentBlock.fields?.field2,\n      (...)\n    }\n  }\n(...)\n```\n8. Done!\n\n## License\n\n**Nuxt Headless CMS** is released under the MIT License.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwojtekthewebdev%2Fnuxt-headless-cms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwojtekthewebdev%2Fnuxt-headless-cms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwojtekthewebdev%2Fnuxt-headless-cms/lists"}