Create a new component

Documentation

To create a new component for use in a render.py jinja template:

  1.  Create a new file in clients/<client-name>/templates/components/<component-name>.vue.
  2. Wrap the code in the component <jinja></jinja> tags.
  3. Include the component in layout files as:
    View code
     {{ include_template('@@components/<component-name>', defaults=defaults }}
    Where <component-name> is the name of the component file without the .vue extension.
  4. Pass the defaults argument to the component. The defaults argument is a dictionary, which is set in the main template in the layouts directory. For example:
    View code
    {% set defaults = {    'key1': 'value1',    'key2': 'value2' } %}
  5. Inside the jinja tags in the component file, pass the following argument:
    View code
    {% set defaults = var_data.get('defaults') %}
  6.  From there, implement the component with HTML and CSS using the defaults argument:
    View code
    <jinja>{% set defaults = var_data.get('defaults') %}<div>    <p>key1's value is {{ defaults['key1'] }}</p>    <p>key2's value is {{ defaults['key2'] }}</p></div><style>div {    color: red;

    }

    </style>

    </jinja>