https://github.com/alchemycms/alchemy-vue
AlchemyCMS Mixins for VueJs
https://github.com/alchemycms/alchemy-vue
alchemy-cms headless-cms vuejs
Last synced: 11 months ago
JSON representation
AlchemyCMS Mixins for VueJs
- Host: GitHub
- URL: https://github.com/alchemycms/alchemy-vue
- Owner: AlchemyCMS
- License: bsd-3-clause
- Created: 2020-11-03T20:29:00.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-05-17T08:18:05.000Z (about 3 years ago)
- Last Synced: 2024-12-14T18:40:40.886Z (over 1 year ago)
- Topics: alchemy-cms, headless-cms, vuejs
- Language: JavaScript
- Homepage:
- Size: 170 KB
- Stars: 4
- Watchers: 4
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# AlchemyCMS mixins for VueJS
[](https://travis-ci.com/AlchemyCMS/alchemy-vue)
[](https://badge.fury.io/js/%40alchemy_cms%2Fvue)
[VueJS](https://vuejs.org) mixins for rendering content from [AlchemyCMS](https://alchemy-cms.com)
## Install
```
yarn add @alchemy_cms/vue
```
## Usage
### In a page component
```js
import { AlchemyPage } from "@alchemy_cms/vue"
export default {
mixins: [AlchemyPage],
}
```
You now have acces to the `page` prop and its `elements`. Also you have access to the `componentName()` method that you can use to dynamically render element components.
```html
import { AlchemyPage } from "@alchemy_cms/vue"
import MainHeader from "~/alchemy/elements/main_header"
import TextBlock from "~/alchemy/elements/text_block"
export default {
components: {
main_header: MainHeader,
text_block: TextBlock,
},
mixins: [AlchemyPage],
}
```
_**Note** you need to pass the data into the components `page` prop either by fetching it from the Alchemy API or by erb interpolation._
### In an element component
```js
import { AlchemyElement } from "@alchemy_cms/vue"
export default {
mixins: [AlchemyElement],
}
```
With this mixin you have acces to the `element` prop and its `ingredients`.
Also you have access to the `getIngredient()` and `getEssence()` methods that you can use to pass content from Alchemy objects into your components props.
```html
import { AlchemyElement } from "@alchemy_cms/vue"
import Container from "~/components/Container"
import Image from "~/components/Image"
import Paragraph from "~/components/Paragraph"
export default {
components: { Container, Image, Paragraph },
mixins: [AlchemyElement],
computed: {
imageUrl() {
return this.getIngredient("picture")
},
altText() {
return this.getEssence("picture")?.alt_text
},
text() {
return this.getIngredient("text")
},
},
}
```
_**Note** you need to pass the data into the components `element` prop either by fetching it from the Alchemy API, by passing it from a page component (see example above) or by erb interpolation._
### `camelCase` attributes
This package supports `camelCase` attributes as well was `under_score` attributes.