Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/valantic/vue-pimcore-generator
Generate Pimcore Twig templates based on your Vue components.
https://github.com/valantic/vue-pimcore-generator
Last synced: about 1 month ago
JSON representation
Generate Pimcore Twig templates based on your Vue components.
- Host: GitHub
- URL: https://github.com/valantic/vue-pimcore-generator
- Owner: valantic
- License: mit
- Created: 2020-10-19T11:57:14.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-13T13:18:46.000Z (almost 4 years ago)
- Last Synced: 2024-09-28T18:01:26.395Z (about 2 months ago)
- Language: JavaScript
- Size: 110 KB
- Stars: 4
- Watchers: 9
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue-Pimcore Generator
[](https://badge.fury.io/js/%40valantic%2Fvue-pimcore-generator)
`node node_modules/.bin/vue-pimcore-generator --help`
## Elevator Pitch
Pimcore uses a WYSIWYG editor to edit documents which is incompatible with Vue components. To alleviate that, this generator opens a web page in the frontend, parses its contents, and creates Pimcore Areabricks. This is done using data attributes in Vue. Creating these Areabricks allows an editor to drag&drop components on a page and being able to see a preview within Pimcore which closely resembles the Vue frontend.
## generator-definitions
This file defines which pages should be parsed by the Pimcore generator. To see the available options and their use, please see the `generator-definitions.sample.js` file.
## Supported `data-pimcore-*` attributes
- `data-pimcore-areabrick` The name that should be used for the area brick in Pimcore. Only [a-z] are allowed.
- `data-pimcore-arg` Optional arguments for the Twig tag, e.g. see https://pimcore.com/docs/6.x/Development_Documentation/Documents/Editables/Relation_(Many-To-One).html#page_Using-Restriction
- `data-pimcore-identifier` The field name of the Twig tag (e.g. `thisisthename -> pimcore_input('thisisthename')`) and entry in the data object. Only [a-z_] are allowed
- `data-pimcore-disable-editmode` Recursively adds the `disabled` attribute `` tags when in Pimcore's edit mode. Was added to prevent navigation usage in Pimcore's edit mode.
- `data-pimcore-type` Type of the CMS editor input type and Twig tag (e.g. `input -> pimcore_input('name')`), see [list of editables](https://pimcore.com/docs/6.x/Development_Documentation/Documents/Editables/index.html#page_List-of-Editables)
- `data-pimcore-document` defines the path to the twig file after the build (e.g. `snippets/my_snippet`) AND source url of the data for GraphQL.
- `data-pimcore-snippet=""` Defines the root element of a snippet template.
## Examples
### Snippet (complete example)
#### `c-header.vue`
This is the only file you write by hand.
```vue
```
#### Rendered HTML
Generated by the browser.
```html
Pimcore-CaaS-Vue-SPA-PWA-PoC!
Viel Spass!
```
#### Main Twig template
```twig
{{ pimcore_snippet('header') }}
```
#### Snippet Twig template at `snippets/header_shared.html.twig`
(Actually, three files are generated to have different view for editmode and viewmode.)
```twig
{{ pimcore_input('headline') }}
{{ pimcore_wysiwyg('content') }}
```
### Pimcore Twig Tags
This Vue code:
```vue
```
becomes this Twig code
```twig
{{ pimcore_input('headline') }}
```
Please see [the Pimcore docs](https://pimcore.com/docs/6.x/Development_Documentation/Documents/Editables/index.html) for which `data-pimcore-type`s are supported. The identifier can be any string and generally, snake_case or camelCase are used. kebab-case might lead to troubles dealing with GraphQL responses. And spaces are evil, weallknowthat.
Additionally, a (second) argument can be passed to the Twig tag using `data-pimcore-arg` such as this example where a relation is restricted to `Product` objects:
```vue
```
Produce this Twig template:
```twig
{{ pimcore_relations('products', {
"types": ["object"],
"subtypes": {
"object": ["object"],
},
"classes": ["Product"]
})
}}
```
### Pimcore Areablocks and Bricks
#### Render mode
The only difference to normal Twig tags is: `data-pimcore-areabrick` on the parent.
```vue
{{ block.content.text }}
```
#### Adding-a-new-brick mode
Simply add the brick unconditionally and execute the generator.
```vue
Lorem ipsum
```
Note: the name of the Vue component is irrelevant. (The parsing happens in a browser at which stage the Vue component names are no longer visible.)