Nuxt3 - Decap CMS boilerplate

Live boilerplate example: https://sailsnake-nuxt-decap-boilerplate.netlify.app

Link to repo: https://github.com/Sfolkerts89/Nuxt3-starter__Decap-cms

A simple starting point

This boilerplate will get you going quick in building with Nuxt and Decap CMS. The base boilerplate consists out of the following:

Decap CMS (config.yml)

  • SEO anchor ready to go (simply use "- &seo" in any page/ file collection)
  • Cloudinary support

Pages

  • Home page (this README content)
  • A typography page with headings, paragraphs, list etc. to help you write your typography styles in one view

Styling

  • Minimal boilerplate styling
  • Simple responsive GRID layout
  • Categorized .scss files (main.scss, mixins.scss, type.scss, variables.scss etc.)
  • 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

Components

  • A simplistic menu component which switches to a mobile menu in small viewports
  • Layout components (logo, header, footer) already called in layout/default.vue
  • A markdown render component that renders markdown to an HTML string server side (NOTE: it is harnessing an experimental feature 'islandComponents'; to remove set: nuxt.config.ts: islandComponents => false, remove the '.server' suffix from ParseMarkdown.server.vue)

Composables:

  • 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 ;)
  • setSeoHead() composable: just feed the SEOmetaData object (defined in config.yaml) from your api data; setSeoHead(apiData.SEOmetaData)
  • useBtnData() composable: does an api call to /content/buttons.md and returns a single button string. Example const buttonText = useBtnData('buttonsApi.readmore') => result: "hello! Read moar!". Conistent button text's throughout your site when using slot in a button.vue component

Install

  1. Clone this repo: git clone https://github.com/Sfolkerts89/Nuxt3-starter__Decap-cms.git or click 'Use this template'
  2. yarn install or npm install
  3. Run frontend locally: yarn dev or npm run dev
  4. Boot up Decap CMS locally:
  • uncomment local_backend: true (leave this out in production for safety's sake)
  • run npx decap-server
  • Navigate to: localhost:3000/admin (asuming you have a frontend instance running)

Netlify deployment

  • Build command: npm run generate (dont use YARN: Node will run out of memory)
  • Publish directory: dist

Boilerplate__extras/ (folder)

I 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.. Addtional 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!

/decap__config/

  • basic 'products' collection (i.e. one level dynamic page names with a re-occuring content structure)
  • Dynamic Fields using Yaml anchors (much like a page builder) which includes a carousel/lightbox option for mulitple images
  • Dynamic Fields collection: code snippet that can be used as is and built upon/ changed to suite your needs.

/nuxt__pages/

/product/ + slug.vue

A 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/

Contact.vue

Very simplistic contact page that includes the `' component. Place the 'forms' folder in a corresponding 'components' folder in your project and uncomment for use.

dynamic-fields.vue

A page that utlizes the <dynamicFields /> component. This works in relation with:

  • The Dynamic Fields anchor provided in: /decap__config/
  • The Dynamic Fields collection provided in: /decap__config/

Products.vue

A simple page displays all the products in the products collection.

vue__components/forms/

In this folder you will find modular form building components. Along with a simple contact form that utilizes a few of these. Aside from being modular, the simple contact form has form input validation:

  1. Input field validation happens in the child component
  2. Child component emits validation data
  3. Parent component pushes data in an array and checks if all entries are valid

/vue__components/media/

Carousel.vue component with the following options via props:

  • imageOnly (Boolean): enable only an array of image links are provided
  • Slides (Array): image, caption
  • Timed (Boolean): enables timedSlides() function, a slideshow if you will
  • hasEnlarge: Enables an overlay on hover which allows for the carousel to enlarge to 100% of the container (full screen function)
  • Color (String): provide a color value for carousel colored elements

RespImage.vue

Responsive image component based on Cloudinary transformations

Props
  • url (String): set up for filename only i.e. "my-image.jpg"
  • Lightbox (Boolean, default: false): enables lightbox function
  • Objectfit (String, default: null): sets CSS object-fit property
  • Color (String): passes color to lightbox accent color
RespVideo.vue

Responsive video component based on Cloudinary transformations

Props

  • url (String): set up for filename only i.e. "my-image.jpg"
  • 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)
  • Autoplay (Boolean, default null): sets autoplay property when video is in view
  • loop (Boolean, default null): Sets loop propery
  • 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)

vue__components/misc/ (folder)

  • DynamicFields.vue: In 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
  • Copyright.vue: A component displaying current year and your branding