Showcase Your Vue.js Skills with a GitHub README Badge

Use this markdown in your README:

![Vue.js](https://img.shields.io/badge/Vue.js-4FC08D?style=for-the-badge&logo=vuedotjs&logoColor=white)

The #4FC08D is Vue's official green. Note the vuedotjs logo identifier (with 'dot') — this is the correct Simple Icons name for Vue.js. Using vue instead may render an incorrect logo or fail to find the icon. The green badge stands out clearly in frontend technology rows.

Specify whether you work with Vue 2 or Vue 3, as they have meaningfully different API styles. Vue 3's Composition API resembles React Hooks and represents the current direction of the ecosystem. If you primarily use Vue 3 with the Composition API and TypeScript, say so — this positions you as a current Vue developer rather than one maintaining legacy Vue 2 applications.

Mention Nuxt.js if you use it — Nuxt is Vue's Next.js equivalent and demonstrates familiarity with SSR and full-stack Vue development. Including Pinia (state management, Vue 3's replacement for Vuex) in your badge row signals up-to-date knowledge of the current Vue ecosystem.

Vue badge groupings for different developer types:

• Modern Vue 3 stack: Vue.js + TypeScript + Pinia + Vite + Tailwind
• Full-stack Nuxt stack: Nuxt.js + Vue.js + TypeScript + Prisma
• Legacy Vue 2 maintenance: Vue.js + Vuex + Webpack (less common to highlight)
• Enterprise Vue stack: Vue.js + TypeScript + Element Plus + Axios

If you are applying for roles where Vue is the primary framework, a detailed bio section explaining your Vue component architecture experience (slots, composables, provide/inject patterns) adds technical depth that badge rows cannot convey.

Vue component files (.vue single-file components) are recognized by GitHub as Vue language in the linguist library. If you have multiple Vue repositories, Vue may appear prominently in your top languages card. This is a positive signal — a high Vue percentage demonstrates a genuine Vue developer rather than someone listing it without evidence.

For pinned repositories, choose projects that show Vue's reactivity system in action: interactive dashboards, real-time data displays, or complex form flows. These demonstrate Vue's strengths more effectively than static landing pages built with Vue.