Official nuxt integration for the Hatchly/Pages module
Last updated 2 months ago by samturrell .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @hatchly/nuxt-pages-module 
SYNC missed versions from official npm registry.

Nuxt Hatchly Pages Module

Module to easily integrate with Hatchly pages


yarn add @hatchly/nuxt-pages-module

Register the module in your nuxt applications config file:

module.exports = {
    // Nuxt config
    modules: {
        // Other Modules
        ['@hatchly/nuxt-pages-module', {
            // Options

    hatchly: {
        pages: {
            // Options can also be defined here

Add the API url to your .env:



The options object can contain the following values:

    apiBase: '',
    apiPath: '',
    apiUrl: '',
    graphQLPath: '',

Each option is described below.


The url of your Hatchly site. This is should be updated in your .env rather than hardcoding a value here.

  • Default: process.env.API_BASE
  • Type: string


The path to the api modules hatchly-path value. This can be modified in the Hatchly api config file, so make sure this path corresponds to that value.

  • Default: 'api'
  • Alias: hatchly.apiPath
  • Type: string


The full api url prefix for the hatchly pages endpoint. By default this is made up of the apiBase, apiUrl and graphQLPath, but can be overwritten in full.

  • Default: ${ process.env.API_BASE }/api/pages
  • Type: string


The path to the graphQL endpoint.

  • Default: pages
  • Type: string



This module will automatically install and register the @nuxtjs/apollo module and set up the default client.

It will also provide a helper for interacting with the client, so instead of doing this:

async asyncData({ app, $route }) {
    const client = app.apolloProvider.defaultClient;

    const { data } = await client.query({
        query: ArticleQuery,
        variables: {
            uri: $route.params.article,

    return data;

You can instead use the helper:

async asyncData({ app }) {
    const { data } = await app.$hatchlyGraphQL(HomepageQuery, {
        uri: $route.params.article,

    return data;

This method accepts the following arguments:

$hatchlyGraphQL(query, variables, config)


The GraphQL query for the apollo client.

  • Default: undefined
  • Type: string
  • required


Variables to pass into the query.

  • Default: {}
  • Type: object


Additional config to pass into the query() method on the Apollo client.

  • Default: {}
  • Type: object

$attr Helper

This module provides an $attr() helper method to the Vue instance. This is the safer way of accessing attributes. This is essentially a wrapper around the lodash/get method, with a bit of extra flavour.


The default usage for this component assumes that your page data is available as this.page within your page-level component, so ensure your data from GraphQL is returned in this form for this usage.

<!-- Get a single value -->
<h1>{{ $attr('header.title') }}</h1>

<!-- Get a single value with fallback value -->
<h2>{{ $attr('header.subtitle', 'My subtitle') }}</h2>

<!-- This is especially useful when performing loops where the data may not exist -->
        v-for="item in $attr('content.items', [])" 
        {{ item.title }}

If your top level data is different to page you can specify a different object as the first argument, and the other arguments will shift accordingly.

<h1>{{ $attr(pageData, 'header.title') }}</h1>

You can also use this in sub components/loops as a safe alternative to nested data structures, where the first argument would be whatever dataset you were accessing.

        v-for="item in $attr('content.items', [])" 
        {{ $attr(item, 'image.name') }}
Convenience modifiers

By default this method will do the following things to certain attribute types:

  • RepeatableSections will return the instance automatically instead of having to access the full $attr('attribute.path.instance', []) path.
  • If accessing a page uri, it will automatically prefix the path with a / in order to ensure correct navigations within the router.
  • If accessing a page-link object, it will automatically prefix the uri with a / in order to ensure correct navigations within the router.
  • For attributes that return a nested value property, we return this by default instead of having to access the full $attr('attribute.path.value') path.

WYSIWYG Attribute Component

When using WYSIWYG attributes, it's recommended to use the provided <wysiwyg-attr /> component rather than manually binding to an element with v-html. This component essentially does that, via the html prop, but also allows for converting internal links to router transitions, rather than forcing an entirely new page load.


This component accepts two props:


The value of your wysiwyg attribute.

  • Default: ''
  • Type: string


The tag used to wrap the wysiwyg attribute content.

  • Default: 'div'
  • Type: string

Current Tags

  • 0.4.0                                ...           latest (2 months ago)

6 Versions

  • 0.4.0                                ...           2 months ago
  • 0.3.0                                ...           4 months ago
  • 0.2.1                                ...           4 months ago
  • 0.2.0                                ...           4 months ago
  • 0.1.1                                ...           4 months ago
  • 0.1.0                                ...           4 months ago
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (1)
Dev Dependencies (3)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |