https://github.com/zemfrog/zemfrog-quasar
Quasar Framework Integration
https://github.com/zemfrog/zemfrog-quasar
quasar zemfrog zemfrog-theme
Last synced: 4 months ago
JSON representation
Quasar Framework Integration
- Host: GitHub
- URL: https://github.com/zemfrog/zemfrog-quasar
- Owner: zemfrog
- Created: 2021-04-11T20:11:08.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-11T21:19:20.000Z (about 5 years ago)
- Last Synced: 2025-11-29T07:13:26.634Z (6 months ago)
- Topics: quasar, zemfrog, zemfrog-theme
- Language: HTML
- Homepage:
- Size: 4.88 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Zemfrog Quasar
Quasar Framework Integration
# Features
* Support vue v2
* Added Vuex & Vue-Router
* Integrated with Quasar
# Usage
Install this
```sh
pip install zemfrog-quasar
```
Add this to the `ZEMFROG_THEMES` configuration
```python
ZEMFROG_THEMES = ["zemfrog_quasar"]
```
# Quick Tutorial
In this theme, several jinja blocks are available, such as:
* `meta` - List of meta tags to include
* `links` - This is to be included in the head tag as (`link`, `title`, etc)
* `content` - This is to be included in the main tag (`div#q-app`)
* `js` - The js script that will be included, after vue, vuex, vue-router & quasar
* `vuex` - Configuration passed to vuex
* `vue_router` - Configuration passed to vue-router
* `vue` - Configuration passed to vue
## Layouts
Examples of using layouts:
```html
{% extends 'quasar/layout.html' %}
```
## Links
An example of using block links, below we add material icons. By default it doesn't come with an icon, so you have to add it yourself.
```html
{% block links %}
{% endblock %}
```
## Content
An example of using block content:
```html
{% block content %}
Toolbar
{% endblock %}
```
## Vue
Examples of using vue:
```html
{% block content %}
Is this active? <{ active }>
{% endblock %}
{% block vue %}
data() {
return {
active: false
}
},
{% endblock %}
```
In the example above, there are several explanations. See below:
* We add `data` to vue via the `vue block`
* We also change the vue delimiter to `<{`, `}>`
# Quasar
If you use this, you can't use the self-closing tag. See here https://quasar.dev/start/umd#usage