{"id":"d9ee8fac-6183-473c-a730-154703fdd263","slug":"king-gd-vue-nuxt-best-practices","name":"vue-nuxt-best-practices","description":"57 performance optimization rules for Vue3 and Nuxt4 applications. Covers SSR, data fetching, reactivity, component design, state management, and bundle optimization.","canonicalUrl":"https://www.xpersona.co/skill/king-gd-vue-nuxt-best-practices","sourceUrl":"https://github.com/King-GD/vue-nuxt-best-practices","homepage":null,"source":"GITHUB_OPENCLEW","vendor":{"slug":"king-gd","label":"King Gd","url":"https://github.com/King-GD/vue-nuxt-best-practices"},"protocols":["OPENCLEW"],"capabilities":["be"],"trustScore":null,"trustConfidence":"unknown","artifactCount":0,"benchmarkCount":0,"lastRelease":null,"freshnessAt":"2026-04-15T02:16:37.400Z","freshnessLabel":"Apr 15, 2026","securityReviewed":true,"openapiReady":false,"stats":[{"label":"Trust score","value":"Unknown"},{"label":"Compatibility","value":"OpenClaw"},{"label":"Freshness","value":"Apr 15, 2026"},{"label":"Vendor","value":"King Gd"},{"label":"Artifacts","value":"0"},{"label":"Benchmarks","value":"0"},{"label":"Last release","value":"Unpublished"}],"factsPreview":[{"factKey":"docs_crawl","label":"Crawlable docs","value":"6 indexed pages on the official domain","category":"integration","href":"https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar","sourceUrl":"https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar","sourceType":"search_document","confidence":"medium","observedAt":"2026-04-15T05:03:46.393Z","isPublic":true,"metadata":{}},{"factKey":"vendor","label":"Vendor","value":"King Gd","category":"vendor","href":"https://github.com/King-GD/vue-nuxt-best-practices","sourceUrl":"https://github.com/King-GD/vue-nuxt-best-practices","sourceType":"profile","confidence":"medium","observedAt":"2026-04-15T02:16:37.400Z","isPublic":true,"metadata":{}},{"factKey":"protocols","label":"Protocol compatibility","value":"OpenClaw","category":"compatibility","href":"https://www.xpersona.co/api/v1/agents/king-gd-vue-nuxt-best-practices/contract","sourceUrl":"https://www.xpersona.co/api/v1/agents/king-gd-vue-nuxt-best-practices/contract","sourceType":"contract","confidence":"medium","observedAt":"2026-04-15T02:16:37.400Z","isPublic":true,"metadata":{}},{"factKey":"traction","label":"Adoption signal","value":"2 GitHub stars","category":"adoption","href":"https://github.com/King-GD/vue-nuxt-best-practices","sourceUrl":"https://github.com/King-GD/vue-nuxt-best-practices","sourceType":"profile","confidence":"medium","observedAt":"2026-04-15T02:16:37.400Z","isPublic":true,"metadata":{}},{"factKey":"handshake_status","label":"Handshake status","value":"UNKNOWN","category":"security","href":"https://www.xpersona.co/api/v1/agents/king-gd-vue-nuxt-best-practices/trust","sourceUrl":"https://www.xpersona.co/api/v1/agents/king-gd-vue-nuxt-best-practices/trust","sourceType":"trust","confidence":"medium","observedAt":null,"isPublic":true,"metadata":{}}],"highlights":["2 GitHub stars","Trust evidence available"],"agentCard":{"name":"vue-nuxt-best-practices","description":"57 performance optimization rules for Vue3 and Nuxt4 applications. Covers SSR, data fetching, reactivity, component design, state management, and bundle optimization.","source":"GITHUB_OPENCLEW","sourceId":"github:1149397927","repository":"https://github.com/King-GD/vue-nuxt-best-practices","documentation":"https://www.xpersona.co/skill/king-gd-vue-nuxt-best-practices/agent/king-gd-vue-nuxt-best-practices","protocols":["OPENCLEW"],"capabilities":["be"],"languages":["typescript"],"install":{"command":"git clone https://github.com/King-GD/vue-nuxt-best-practices.git","ecosystem":"git"},"examples":[{"kind":"example","language":"vue","snippet":"<!-- ❌ BAD: Different values on server vs client -->\n<template>\n  <div>{{ Date.now() }}</div>\n  <div>{{ Math.random() }}</div>\n  <div>{{ window.innerWidth }}</div>\n</template>\n\n<!-- ✅ GOOD: Use ClientOnly or onMounted -->\n<template>\n  <ClientOnly>\n    <div>{{ currentTime }}</div>\n    <template #fallback>Loading...</template>\n  </ClientOnly>\n</template>\n\n<script setup lang=\"ts\">\nconst currentTime = ref<number | null>(null)\nonMounted(() => {\n  currentTime.value = Date.now()\n})\n</script>"},{"kind":"example","language":"ts","snippet":"// ✅ GOOD: Nuxt 3/4 recommended way\nif (import.meta.client) {\n  // Client-only code\n  initAnalytics()\n}\n\nif (import.meta.server) {\n  // Server-only code\n}\n\n// ❌ BAD: Deprecated\nif (process.client) { }"}]}}