Guardrails for Vue 2.7 + Vuetify 2.7 frontends built with Vite 7, with exact version pins, a working Vite and Axios setup, and Vuetify 2 component patterns that avoid Vue 3 and Vuetify 3 idioms.
76
95%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
This frontend runs on Vue 2.7 and Vuetify 2, built with Vite. npm latest is wrong for every core package here, and most examples online are Vue 3 or Vuetify 3. Follow the skills vue2-vuetify2-vite-setup (project and config) and vuetify2-components (screens).
vue@2.7.16, vuetify@2.7.2, @vitejs/plugin-vue2@2.3.4, @mdi/font@7.4.47 and vite@^7. Never install latest of these: Vue 3 breaks Vue 2 code, Vuetify 3 and 4 need Vue 3, and Vite 8 breaks @vitejs/plugin-vue2.axios@^1.20.0, never 1.14.1 or 0.30.4 (malicious releases), and commit the lockfile. Use Node 22 or 24, written in .nvmrc.vue-router@3.6.5, vuex@3.6.2 or pinia@2.3.1, @vue/test-utils@1.npm create vue@latest, vue create -d, vite-plugin-vuetify, createVuetify or unplugin-vue-components 31 or later. Do not install sass: import the prebuilt vuetify/dist/vuetify.min.css.Vue.use(Vuetify) and new Vue({ vuetify, render: h => h(App) }).$mount('#app'), never createApp. vite.config.js aliases vue to vue/dist/vue.esm.js and sets dedupe: ['vue'].import.meta.env.VITE_* (process.env does not exist in client code). Components call functions from src/api/, never axios or a hardcoded URL.Teleport, defineModel, modelValue or v-model:foo: a custom v-model is prop value + event input, and other two-way props use :foo.sync + $emit('update:foo', v).beforeDestroy and destroyed, put key on the children of <template v-for>, and never put v-if and v-for on the same element.this.items[i] = x, this.items.length = 0 or new object keys. Use splice, this.$set or a new array.{ text, value }, slots #item.<value>="{ item }", item-text and item-value, :search-input.sync, activators #activator="{ on, attrs }". Vuetify 3 props (variant, density, location, item-title, bg-color) do nothing in v2, and <v-table> does not exist.<v-app> + <v-main>. Prefer the Options API, as the Vuetify 2 docs do.flat/vue2-recommended config of eslint-plugin-vue. Since v10, recommended means Vue 3.