{"id":22591548,"url":"https://github.com/netsells/nuxt-pages-module","last_synced_at":"2025-03-28T18:26:04.713Z","repository":{"id":46354033,"uuid":"259646177","full_name":"netsells/nuxt-pages-module","owner":"netsells","description":"Official nuxt integration for the Hatchly/Pages module","archived":false,"fork":false,"pushed_at":"2021-10-21T15:58:59.000Z","size":385,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-02T18:52:07.050Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/netsells.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}},"created_at":"2020-04-28T13:33:41.000Z","updated_at":"2021-10-21T15:59:03.000Z","dependencies_parsed_at":"2022-09-12T04:01:36.831Z","dependency_job_id":null,"html_url":"https://github.com/netsells/nuxt-pages-module","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netsells%2Fnuxt-pages-module","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netsells%2Fnuxt-pages-module/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netsells%2Fnuxt-pages-module/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netsells%2Fnuxt-pages-module/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/netsells","download_url":"https://codeload.github.com/netsells/nuxt-pages-module/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246078454,"owners_count":20720153,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-12-08T09:13:02.784Z","updated_at":"2025-03-28T18:26:04.685Z","avatar_url":"https://github.com/netsells.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nuxt Hatchly Pages Module\n\n\u003e Module to easily integrate with Hatchly pages\n\n## Installation\n\n```bash\nyarn add @hatchly/nuxt-pages-module\n```\n\nRegister the module in your nuxt applications config file:\n\n```js\nmodule.exports = {\n    // Nuxt config\n    modules: [\n        // Other Modules\n        ['@hatchly/nuxt-pages-module', {\n            // Options\n        }],\n    ],\n\n    hatchly: {\n        pages: {\n            // Options can also be defined here\n        },\n    },\n};\n```\n\n## Options\n\nThe options object can contain the following values:\n\n```js\n{\n    cacheTimeout: Number,\n    disableBackgroundFetch: Boolean,\n},\n```\n\nEach option is described below.\n\n### `cacheTimeout`\n\n\u003e The duration, in seconds, until the cached date is refreshed. The cache can be disabled completely by passing a falsey value.\n\n- Default: `3600` (1 hour)\n- Type: `number|boolean`\n\n### `disableBackgroundFetch`\n\n\u003e By default, if the cache is enabled, all requests will still happen regardless, but will instead happen asynchronously on the server side after the cached data has been returned. Set this option to `true` to prevent this functionality entirely, and always rely on traditional caching.\n\n- Default: `false`\n- Type: `boolean`\n\n## Runtime Config\n\nBy default, this package will utilise `API_URL` and `API_URL_BROWSER` variables as defined in your env. These are injected as runtime variables for you.\n\nYou can supply your graphql endpoint manually to the module via the `publicRuntimeConfig` and `privateRuntimeConfig` objects, e.g.:\n\n```js\nmodule.exports = {\n    /** ... */\n    publicRuntimeConfig: {\n        /** ... */\n        GRAPHQL_ENDPOINT: process.env.API_GRAPHQL_URL_BROWSER,\n    },\n    /** ... */\n    privateRuntimeConfig: {\n        /** ... */\n        GRAPHQL_ENDPOINT: process.env.API_GRAPHQL_URL,\n    },\n};\n```\n\nIf the api is accessible on an internal address, you can skip dns lookup and replace the env variable in `privateRuntimeConfig` object with a different variable pointing to this address. \n\n## Features\n\n### GraphqlQL request client\n\nThis module will automatically install and register the [nuxt-graphql-request](https://www.npmjs.com/package/nuxt-graphql-request) module and set up the client.\n\nIt will also provide a helper for interacting with the client:\n\n```js\nexport default {\n    async asyncData({ app }) {\n        const data = await app.$hatchlyGraphQL(HomepageQuery, {\n            uri: $route.params.article,\n        });\n    \n        return data;\n    },\n};\n```\n\nThis method accepts the following arguments:\n\n`$hatchlyGraphQL(query, variables)`\n\n#### `query`\n\n\u003e The GraphQL query for the client.\n\n- Default: `undefined`\n- Type: `string` or GraphQL AST\n- `required`\n\n#### `variables`\n\n\u003e Variables to pass into the query.\n\n- Default: `{}`\n- Type: `object`\n\n### `$attr` Helper\n\nThis 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.\n\n#### Usage\n\nThe 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.\n\n```vue\n\u003c!-- Get a single value --\u003e\n\u003ch1\u003e{{ $attr('header.title') }}\u003c/h1\u003e\n\n\u003c!-- Get a single value with fallback value --\u003e\n\u003ch2\u003e{{ $attr('header.subtitle', 'My subtitle') }}\u003c/h2\u003e\n\n\u003c!-- This is especially useful when performing loops where the data may not exist --\u003e\n\u003cul\u003e\n    \u003cli \n        v-for=\"item in $attr('content.items', [])\" \n        :key=\"item.title\"\n    \u003e\n        {{ item.title }}\n    \u003c/li\u003e\n\u003c/ul\u003e\n```\n\nIf 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.\n\n```vue\n\u003ch1\u003e{{ $attr(pageData, 'header.title') }}\u003c/h1\u003e\n```\n\nYou 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.\n\n```vue\n\u003cul\u003e\n    \u003cli \n        v-for=\"item in $attr('content.items', [])\" \n        :key=\"item.title\"\n    \u003e\n        {{ $attr(item, 'image.name') }}\n    \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n##### Convenience modifiers\n\nBy default this method will do the following things to certain attribute types:\n\n- RepeatableSections will return the `instance` automatically instead of having to access the full `$attr('attribute.path.instance', [])` path.\n- If accessing a page uri, it will automatically prefix the path with a `/` in order to ensure correct navigations within the router.\n- If accessing a `page-link` object, it will automatically prefix the uri with a `/` in order to ensure correct navigations within the router.\n- 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.\n\n### WYSIWYG Attribute Component\n\nWhen using WYSIWYG attributes, it's recommended to use the provided `\u003cwysiwyg-attr /\u003e` component rather than manually binding to an element with `v-html`. This component will convert the html to render functions and return the content within a tag you have provided, or div by default. Using render functions allows the html to be rendered as elements within the virtual dom that can easily inherit styling. It also allows for converting internal links to router transitions, rather than forcing an entirely new page load.\n\n```vue\n\u003cwysiwyg-attr\n    :html=\"$attr('body.content')\"\n/\u003e\n```\n\nThis component accepts two props:\n\n#### `html`\n\n\u003e The value of your wysiwyg attribute.\n\n- Default: `''`\n- Type: `string`\n\n#### `tag`\n\n\u003e The tag of the wrapper component.\n\n- Default: `'div'`\n- Type: `string`\n\n## Storybook\n\nThis module exposes a storybook integration to add the `$attr` global and the `WysiwygAttr` component. Simply pull the following module into your project, in the `preview.js` file for example:\n\n```js\nimport '@hatchly/nuxt-pages-module/storybook';\n``` \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetsells%2Fnuxt-pages-module","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetsells%2Fnuxt-pages-module","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetsells%2Fnuxt-pages-module/lists"}