@voicenter/umbraco-headless

umbraco-headless

Nuxt module that helps you to easily load your Umbraco data directly into your great Nuxt project.

Setup:

1. Install dependency by running npm i @voicenter/umbraco-headless or yarn add @voicenter/umbraco-headless
2. Configure your nuxt project by adding the following:

// nuxt.config.js
{
    modules: [
        // ...
        '@voicenter/umbraco-headless'
    ]
}

Options:

In order to configure the module - create umbraco-headless.config.js file in the root of your Nuxt project. The following options can be specified while setting the module:

Option	Description	Default	Required
getUmbracoDataAPI	An URI where plugin will do a POST requests in order to fetch Umbraco Data	-	true
generateUmbracoDataAPI	An URI where plugin will do a POST requests in order to fetch sitemap.xml robots.txt, umbracodata.json to generate files	-	true
site	The name of the website	-	true
trailingSlashRedirect	The value makes a 301 redirection to a non trailing slash URL	false	false
redirects	-	-	false
redirects.enable	If to enable 301 redirects	false	-
redirects.redirectFolderName	Name of the Umbraco Data content type where to find redirects (plugin will check children's oldUrl/newUrl key pairs)	redirectFolder	-
redirects.rootChildrenUmbracoPath	Path of the children content	SiteData.children	-
redirects.enableInDevelopment	Whenever to do redirects in development mode	false	-

Make sure you have all the created components in your pages folder. But if you don't have all the needed components - the plugin will setup the index.vue component for all the missing components routes.

⚠️ Be aware that this module will automatically setup the Vuex storage for your Nuxt project.

Example:

// umbraco-headless.config.js
export default {
  getUmbracoDataAPI: 'https://nuxt-umbraco-api.voicenter-ltd.workers.dev/',
  generateUmbracoDataAPI: 'http://localhost:3030',
  site: 'voice_he_prod',
  redirects: {
    enable: true,
    redirectFolderName: 'redirectFolder',
    rootChildrenUmbracoPath: 'SiteData.children',
    enableInDevelopment: true
  },
  prefetch: [
    {
      fetch: {
        type: 'contentType',
        pattern: 'websiteMainNavigation'
      },
      globalKey: 'websiteMainNavigation'
    }
  ]
}

Usage

Just add the following to your pages components:

async asyncData (context) {
    const data = await context.$Umbraco.get(context, {
        fetch: {
            type: 'path',
            pattern: context.route.meta[0].Jpath
        },
        apiOnly: true || false,                 // If apiOnly true your page will be fetched from api
                                                // If your Component is available in Vue store you set apiOnly false and your component
                                                // will be fetched from your Vuex store
    }) || {}
    return data;
}

If you want to fetch your Page by contentType:

async asyncData (context) {
    const data = await context.$Umbraco.get(context, {
        fetch: {
            type: 'contentType',
            pattern: '[your content type value]'
        },
        apiOnly: true || false                 // If apiOnly true your page will be fetched from api
                                               // If your Component is available in Vue store you set apiOnly false and your component
                                               // will be fetched from your Vuex store
    }) || {}
    return data;
}