Resources/views/layout/base-full-page.html.twig

<!DOCTYPE html>
<html lang="{{ app.request.locale | default('en') }}">
    <head>
        {% block head %}
            {% block head_meta %}
                <meta charset="UTF-8">
            {% endblock %}
            <title>{% block title %}{% endblock %}</title>
            {% block stylesheets %}
                <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
                {{ encore_entry_link_tags('app') }}
            {% endblock %}
        {% endblock %}
    </head>
    <body>
        <div id="{{ vueAppId | default('sv-app') }}">
            <sv-app {% block vue_app_properties %}v-cloak title="{{ application_title | default('') }}" {% endblock %}>
                <div slot="menu">
                    {% block menu %}
                        <v-list nav>
                            {% block menu_items %}
                                <sv-menu-item href="/" icon="mdi-view-dashboard">
                                    Dashboard
                                </sv-menu-item>
                            {% endblock %}
                        </v-list>
                    {% endblock %}
                </div>
                {% block flash_messages %}
                    {% include '@SymfonyVuetified/layout/_flash_messages.vue.twig' %}
                {% endblock %}
                {% block body %}{% endblock %}
            </sv-app>
        </div>
        {% block javascripts %}
            {% block script %}{% endblock %}
            {% block vue_script %}
                {% include '@SymfonyVuetified/layout/_vue_script.html.twig' %}
            {% endblock %}
            {# app.js must be loaded after the vue_script to make sure the vue object is available. #}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}
    </body>
</html>