{"id":30730465,"url":"https://github.com/riwert/nuxt-decap-cms","last_synced_at":"2026-02-19T16:02:34.312Z","repository":{"id":310197446,"uuid":"1039025757","full_name":"riwert/nuxt-decap-cms","owner":"riwert","description":"Nuxt.js v3 + Decap CMS","archived":false,"fork":false,"pushed_at":"2025-08-22T10:58:31.000Z","size":750,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-19T00:49:50.138Z","etag":null,"topics":["decap-cms","nuxt3"],"latest_commit_sha":null,"homepage":"https://nuxtdecap.netlify.app","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/riwert.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-16T10:14:46.000Z","updated_at":"2025-08-22T10:58:35.000Z","dependencies_parsed_at":"2025-09-13T07:16:02.302Z","dependency_job_id":null,"html_url":"https://github.com/riwert/nuxt-decap-cms","commit_stats":null,"previous_names":["riwert/nuxt-decap-cms"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/riwert/nuxt-decap-cms","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riwert%2Fnuxt-decap-cms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riwert%2Fnuxt-decap-cms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riwert%2Fnuxt-decap-cms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riwert%2Fnuxt-decap-cms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/riwert","download_url":"https://codeload.github.com/riwert/nuxt-decap-cms/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riwert%2Fnuxt-decap-cms/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29621899,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T13:04:20.082Z","status":"ssl_error","status_checked_at":"2026-02-19T13:03:33.775Z","response_time":117,"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":["decap-cms","nuxt3"],"created_at":"2025-09-03T16:09:42.798Z","updated_at":"2026-02-19T16:02:34.283Z","avatar_url":"https://github.com/riwert.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nuxt3 - Decap CMS boilerplate\n\n\n**Live boilerplate example:** https://sailsnake-nuxt-decap-boilerplate.netlify.app\n\n\n**Link to repo:** https://github.com/Sfolkerts89/Nuxt3-starter__Decap-cms\n\n## A simple starting point\n\nThis boilerplate will get you going quick in building with Nuxt and Decap CMS. The base boilerplate consists out of the following:\n\n### Decap CMS (config.yml)\n\n* SEO anchor ready to go (simply use \"- \u0026seo\" in any page/ file collection)\n\n* Cloudinary support\n\n### Pages\n\n* Home page (this README content)\n\n* A typography page with headings, paragraphs, list etc. to help you write your typography styles in one view\n\n### Styling\n\n* Minimal boilerplate styling\n\n* Simple responsive GRID layout\n\n* Categorized .scss files (main.scss, mixins.scss, type.scss, variables.scss etc.)\n\n* variables.modules.scss which allows you to export your scss variables from variables.scss to be used in JS vars. Example: `const color = variables.myColor`\n\n### Components\n\n* A simplistic menu component which switches to a mobile menu in small viewports\n\n* Layout components (logo, header, footer) already called in layout/default.vue\n\n* A responsive image component that calls a full width or downsized version of am image, is responsive to its parent container and has a built in lightbox (Props: lightbox, objectFit: Boolean, color: String)\n\n\n### Composables:\n\n* mdToHtml() composable: uses Nuxt/Content/MDC renderer. This first renders an HTML object from markdown input and returns the HTML object as a single string. This renders server side ;)\n\n* setSeoHead() composable: just feed the SEOmetaData object (defined in config.yaml) from your api data; `setSeoHead(apiData.SEOmetaData)`\n\n* useBtnData() composable: does an api call to /content/buttons.md and returns a single button string. Example `const buttonText = useBtnData('buttonsApi.readmore')` =\u003e result: `\"hello! Read moar!\"`. Conistent button text's throughout your site when using `slot` in a `button.vue` component\n\n## Install\n\n1. Clone this repo: `git clone https://github.com/Sfolkerts89/Nuxt3-starter__Decap-cms.git` or click 'Use this template'\n\n2. `yarn install` or `npm install`\n\n4. Run frontend locally: `yarn dev` or `npm run dev`\n\n3. Boot up Decap CMS locally:\n  * uncomment `local_backend: true` (*leave this out in production for safety's sake*)\n  * run `npx decap-server`\n  * Navigate to: localhost:3000/admin (asuming you have a frontend instance running)\n\n## Netlify deployment\n  * Build command: `npm run generate` (dont use YARN: Node will run out of memory)\n  * Publish directory: `dist`\n\n## Boilerplate__extras/ (folder)\n\nI found it tough to decide wether to build an extranous boilerplate packed with features or to keep it clean and simple.. So i did both..\nAddtional code snippets, components and more can be found in the folder 'boilerplate__extras'. If you want to start clean and simple, just delete the folder!\n\n\n### /decap__config/\n\n* basic 'products' collection (i.e. one level dynamic page names with a re-occuring content structure)\n\n* Dynamic Fields using Yaml anchors (much like a page builder) which includes a carousel/lightbox option for mulitple images\n\n* Dynamic Fields collection: code snippet that can be used as is and built upon/ changed to suite your needs.\n\n### /nuxt__pages/\n\n#### /product/ + [slug].vue\n\nA simple dynamic page based of slug as a parameter set up as a 'products' page. This is in relation to the 'products' colleciton in boilerplate__extras/decap__config/\n\n#### Contact.vue\n\nVery simplistic contact page that includes the `\u003cBasicInquery /\u003e' component. Place the 'forms' folder in a corresponding 'components' folder in your project and uncomment for use.\n\n#### dynamic-fields.vue\n\nA page that utlizes the `\u003cdynamicFields /\u003e` component. This works in relation with:\n\n* The Dynamic Fields anchor provided in: /decap__config/\n\n* The Dynamic Fields collection provided in: /decap__config/\n\n#### Products.vue\n\nA simple page displays all the products in the products collection. \n\n### vue__components/forms/\n\nIn this folder you will find modular form building components. Along with a simple contact form that utilizes a few of these. \nAside from being modular, the simple contact form has form input validation:\n\n1. Input field validation happens in the child component\n\n2. Child component emits validation data\n\n3. Parent component pushes data in an array and checks if all entries are valid\n\n### /vue__components/media/\n\n#### Carousel.vue component with the following options via props:\n\n* imageOnly (Boolean): enable only an array of image links are provided\n\n* Slides (Array): image, caption\n\n* Timed (Boolean): enables timedSlides() function, a slideshow if you will\n\n* hasEnlarge: Enables an overlay on hover which allows for the carousel to enlarge to 100% of the container (full screen function)\n\n* Color (String): provide a color value for carousel colored elements\n\n#### RespImage.vue\n\nResponsive image component based on Cloudinary transformations\n\n##### Props\n\n* url (String): set up for filename only i.e. `\"my-image.jpg\"`\n\n* Lightbox (Boolean, default: false): enables lightbox function\n\n* Objectfit (String, default: null): sets CSS object-fit property\n\n* Color (String): passes color to lightbox accent color\n\n\n##### RespVideo.vue\n\nResponsive video component based on Cloudinary transformations\n\n#### Props\n\n* url (String): set up for filename only i.e. `\"my-image.jpg\"`\n\n* hasSound (Boolean, default: null): sets muted property. If hasSound is set, video controls will appear to allow playback. Otherwise playback will `autoplay` (if autoplay is set to true)\n\n* Autoplay (Boolean, default null): sets autoplay property when video is in view\n\n* loop (Boolean, default null): Sets loop propery\n\n* id (String):  the autoplay in view feature needs an element id to work. The video is is built using `:id` + `props.url.slice(-10)` (ensures unique id's per page)\n\n\n### vue__components/misc/ (folder)\n\n* DynamicFields.vue:\nIn here you will find the dynamicFields.vue component that corresponds with the 'dynamicFields.vue'. You will need this component to render the fields 'dynamic-fields' collection in dynamicFields.vue\n\n* Copyright.vue:\nA component displaying current year and your branding\n\n\n### vue__composables/ (folder)\n\n* slugify.js:\nA simple composable that returns a slug typed string (handy for fetching a slug off a title)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friwert%2Fnuxt-decap-cms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Friwert%2Fnuxt-decap-cms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friwert%2Fnuxt-decap-cms/lists"}