Update

myapp/templates/inc/filter.html

@@ -1,15 +1,31 @@
+<!-- Начало: Фильтр -->
 <div class="row" v-if="panels.filter.visible">
 <div class="col">
-<div class="form-group">
+<div class="mb-3">
+<form @submit.prevent="filter_apply">
 <div class="input-group">
-<div class="input-group-prepend">
-    <button class="btn btn-outline-danger" type="button" id="button-addon1" v-on:click="filterClear"><i class="fa fa-remove"></i></button>
-</div>
-<input class="form-control" id="filter" placeholder="Фильтр" v-model="filter" />
-<div class="input-group-append">
-    <button class="btn btn-outline-success" type="button" id="button-addon1" v-on:click="filterApply"><i class="fa fa-check"></i></button>
-</div>
+    <button class="btn btn-outline-danger" type="button" v-on:click="filter_clear"><i class="fa fa-remove"></i></button>
+    <input class="form-control" placeholder="Фильтр" v-model="panels.filter.value" />
+    <button class="btn btn-outline-success" type="submit"><i class="fa fa-check"></i></button>
 </div>
+</form>
 </div>
 </div>
 </div>
+
+<script type="text/javascript">
+Object.assign(root.data.panels, {
+    filter: {
+        visible: false,
+        value: ''
+    },
+});
+Object.assign(root.methods, {
+    filter_clear: function () {
+        /* Очистить фильтр */
+        let vm = this;
+        vm.panels.filter.value = '';
+    },
+});
+</script>
+<!-- Конец: Фильтр -->

myapp/templates/inc/init.html

@@ -0,0 +1,23 @@
+<script type="text/javascript">
+let root = {
+    data: {
+        panels: {}
+    },
+    methods: {
+        arrayRemove: function (arr, value) {
+            /* Удаление элемента из списка */
+            return arr.filter(function (ele) {
+                return ele != value;
+            });
+        },
+        panel_show: function (panel) {
+            /* Показать/скрыть панель */
+            panel.visible = !panel.visible;
+        },
+    },
+    components: {},
+    created: function() {},
+    computed: {},
+    mounted: function() {},
+};
+</script>

myapp/templates/inc/notes.html

@@ -0,0 +1,26 @@
+{% raw %}
+<div class="row" v-for="(note, noteIdx) in notes">
+<div class="col py-2" :class="{'bg-light': noteIdx % 2}">
+
+<a :href="'/note/' + note.id" v-html="note.title"></a>
+
+<div class="row">
+<div class="col small text-muted">
+<span v-for="(tag, tagIdx) in note.tags">
+<i class="fa fa-tag"></i> <a class="text-monospace" :href="'/tag/' + tag.id">{{ tag.name }}</a>&nbsp;
+</span>
+</div>
+</div>
+
+<div class="row">
+<div class="col text-muted">
+<small>
+Создано: {{ note.created }}&nbsp;
+Обновлено: {{ note.updated }}
+</small>
+</div>
+</div>
+
+</div>
+</div>
+{% endraw %}

myapp/templates/inc/pages.html

@@ -1,5 +1,5 @@
 {% raw %}
-<div class="row" v-for="(page, pageIdx) in filteredPages">
+<div class="row" v-for="(page, pageIdx) in pages">
 <div class="col py-2" :class="{'bg-light': pageIdx % 2}">
 <a :href="'/page/' + page.id">{{ page.title }}</a>
 

myapp/templates/inc/run.html

@@ -0,0 +1,13 @@
+<script type="text/javascript">
+const app = Vue.createApp({
+    data: function() {
+        return root.data;
+    },
+    methods: root.methods,
+    components: root.components,
+    created: root.created,
+    computed: root.computed,
+    mounted: root.mounted,
+});
+app.mount('#app');
+</script>

myapp/templates/inc/users.html

@@ -0,0 +1,16 @@
+{% raw %}
+<div class="row" v-for="(user, userIdx) in users">
+<div class="col py-2">
+<a :href="'/user/' + user.id">{{ user.name }}</a>
+
+<div class="row">
+<div class="col text-muted">
+<small>
+Создан: {{ user.created }}
+</small>
+</div>
+</div>
+
+</div>
+</div>
+{% endraw %}