@voicenter-team/umbraco-headless v2.0.12

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-team/umbraco-headless or yarn add @voicenter-team/umbraco-headless
2. Configure your nuxt project by adding the following:

// nuxt.config.js
{
    modules: [
        // ...
        '@voicenter-team/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:

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.

:warning: 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;
}