luyadev / luya-headless-cms-api
The bridge between your SPA application and the LUYA CMS Module.
Installs: 7 145
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 4
Forks: 3
Open Issues: 1
Type:luya-module
Requires
- luyadev/luya-module-cms: >3.0
Requires (Dev)
- luyadev/luya-testsuite: ^2.0
This package is auto-updated.
Last update: 2024-10-14 18:29:12 UTC
README
LUYA HEADLESS CMS API BRIDGE
This module provides and out of the box ready API in order to consume the LUYA CMS informations.
- The API is public and therefore requires no authentication.
- CORS works out of the box.
- Only required informations will be exposed to public.
- Its optimized with caching, which makes it very fast!
This can turn your exists LUYA CMS website into an API which you can use to build your website! This can be either frontend (JavaScript, Vue, React) or any backend technology.
Installation
Install the extension through composer:
composer require luyadev/luya-headless-cms-api
Add the module to the config
'modules' => [ //... 'api' => [ 'class' => 'luya\headless\cms\api\Module', ] ]
The module name is equal to the rest api url. When you register the module as foobar
in the config the api would be available as /foobar/menu?langId=x
. By default its api
. All APIs expect a GET request.
Menu
All APIs which are handling Menu Data - helping you to build the navigation in layout files.
/api/menu/containers ─ Get Containers
Returns all available CMS Menu Containers. LUYA will create a content
default container while setup.
/api/menu?langId={int} ─ Get Menu Tree
Returns the page tree (menu) for a given language api/menu?langId=1
. In order to return only visible items add &onlyVisible=1
. Example response:
{ "default": { "id": 1, "name": "Menu", "alias": "default", "items": [ { "id": 1, "index": 1, "nav_id": 1, "lang_id": 1, "is_hidden": true, "is_home": true, "title": "Startseite", "title_tag": null, "alias": "startseite", "path": "startseite", "description": null, "children": [], "has_children": false }, { "id": 2, "index": 2, "nav_id": 2, "lang_id": 1, "is_hidden": false, "is_home": false, "title": "Lets Talk", "title_tag": "", "alias": "letstalk", "path": "letstalk", "description": "Genuss und Freude.", "children": [], "has_children": false }, { "id": 3, "index": 4, "nav_id": 3, "lang_id": 1, "is_hidden": false, "is_home": false, "title": "About Me", "title_tag": null, "alias": "aboutme", "path": "aboutme", "description": null, "children": [], "has_children": false } ] }, "footer": { "id": 2, "name": "Footer", "alias": "footer", "items": [ { "id": 6, "index": 1, "nav_id": 6, "lang_id": 1, "is_hidden": false, "is_home": false, "title": "Datenschutz", "title_tag": null, "alias": "datenschutz", "path": "datenschutz", "description": null, "children": [], "has_children": false }, { "id": 7, "index": 2, "nav_id": 7, "lang_id": 1, "is_hidden": false, "is_home": false, "title": "Impressum", "title_tag": null, "alias": "impressum", "path": "impressum", "description": null, "children": [], "has_children": false } ] } }
Content
All APIs which helps you to build the content for a given page, mostly by handling the blocks for a given page id.
/api/page?id={int|string} ─ Get Page Blocks
Returns the placeholders with all blocks for a certain page (nav item) api/page?id=8
. Its also possible to provide the page slug (alias) api/page?id=home
. The response contains an object with page
, placeholders
, layout
and properties
.
Example Response:
{ "page":{ "id":1, "nav_id":1, "lang_id":1, "title":"Startseite", "alias":"startseite", "description":null, "keywords":null, "title_tag":null }, "placeholders":{ "content":[ { "id":13, "index":0, "block_id":2, "block_name":"HtmlBlock", "full_block_name":"LuyaCmsFrontendBlocksHtmlBlock", "is_container":false, "values":{ "html":"<h1 class=\"display-2 font-weight-light\">.......</h4>" }, "cfgs":{ "raw":null }, "extras":[] }, ] }, "layout":{ "id":1, "name":"Default" }, "properties":{ "VarName":null } }
/api/page/nav?id={int}&langId={int} ─ Get Page Language Context Blocks
Returns the placeholders with all blocks for a certain nav id with the corresponding language id.
/api/page/home?langId={int} ─ Get Homepage Page Blocks
Returns the content of the homepage for the given language.
VUE
Proof of concept example in VUE
Create a component for the given Element, in this case we are using the Html Block LuyaCmsFrontendBlocksHtmlBlock.vue
:
<template> <div v-html="block.values.html" /> </template> <script> export default { props: { block: Object } } </script>
Create a component which loads the page and foreaches the components:
<template> <div v-if="isLoaded"> <h1>{{ this.title }}</h1> <component v-for="item in contentPlaceholder" :key="item.id" :is="item.block_name" :block="item" /> </div> </template> <script> import LuyaCmsFrontendBlocksHtmlBlock from '../../components/LuyaCmsFrontendBlocksHtmlBlock.vue' export default { components: { LuyaCmsFrontendBlocksHtmlBlock }, data: () => ({ isLoaded: false, response: null }), computed: { contentPlaceholder () { return this.isLoaded ? this.response.placeholders.content : [] } }, async mounted () { const { data } = await this.$axios('page?id=' + this.$route.params.slug) this.response = data this.isLoaded = true } } </script>