vscode vue3 setup snippet

Author: atomjoy

.vscode/sample-snippets.code-snippets

@@ -8,7 +8,52 @@
 	"Vue3 setup in tag": {
 		"scope": "vue",
 		"prefix": ["v3-setup"],
-		"body": ["<script setup>", "import { ref, reactive, toRefs, onMounted, onUnmounted, watch } from 'vue'", "$0", "</script>\r\n", "<template>\r\n", "</template>\r\n", "<style lang=\"css\" scoped>\r\n", "</style>"],
+		"body": [
+            "<script setup>",
+            "import { ref, reactive, computed, watch, toRefs, onMounted, onUnmounted } from 'vue'",
+            "import { RouterLink, useRouter, useRoute } from 'vue-router'",
+            "import { useAuthStore } from '../stores/auth.js'",
+            "import { useI18n } from 'vue-i18n'",
+            "const { t, locale, availableLocales } = useI18n({ useScope: 'global' })",
+            "const emits = defineEmits(['update:modelValue', 'change'])",
+            "const props = defineProps({ label: { type: String, required: true, default: 'Label' }, })",
+            "const store = useAuthStore()",
+            "const route = useRoute()",
+            "let input = ref(null)",
+            "let password = ref('')",
+            "const checked = computed(() => { return props.modelValue + 1 })",
+            "onMounted(() => {",
+            "input.value.focus()",
+            "console.log('Current locale', locale.value, availableLocales)",
+            "store.changeLocale(route.query.locale)",
+            "store.activateUser(route.params.id, route.params.code)",
+            "})",
+            "function onSubmit(e) {",
+            "   store.scrollTop()",
+            "   store.loginUser(new FormData(e.target))",
+            "}",
+            "watch(() => locale.value, (lang) => { store.changeLocale(lang) })",
+            "</script>",
+            "<template>",
+            "   <router-link to=\"/\"><img class=\"float-left auth-logo\" src=\"@/assets/images/auth-logo.png\" height=\"70\" /></router-link>",
+            "   <router-link to=\"/login\" class=\"link-left\">{{ $t('change_password.Have_an_account') }}</router-link>",
+            "$0",
+            "<form @submit.prevent=\"onSubmit\" class=\"form-auth\">",
+            "   <input ref=\"input\" v-model=\"password\" name=\"password\">",
+            "   <button class=\"button\" :title=\"$t('change_password.Change')\">{{ $t('change_password.Change') }}</button>",
+            "</form>",
+            "</template>",
+            "<style>",
+            "@import './css/root.css';",
+            "[color-scheme='dark'] {",
+            "   color-scheme: dark;",
+            "   --logo: url('@/assets/images/auth-logo-dark.png');",
+            "}",
+            "</style>",
+            "<style lang=\"css\" scoped>",
+            "@import './css/auth.css'",
+            "</style>"
+        ],
 		"description": "Vue3 setup in tag"
 	},
 	"Php if": {