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
   Hide 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
   Hide code
   {% set defaults = {    'key1': 'value1',    'key2': 'value2' } %}
5. Inside the jinja tags in the component file, pass the following argument:
   View code
   Hide code
   {% set defaults = var_data.get('defaults') %}
6.  From there, implement the component with HTML and CSS using the defaults argument:
   View code
   Hide 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>