Security Checklist for Vue.js Apps Built with AI

Vue.js and Nuxt are increasingly popular targets for AI code generation. Vue's template syntax and reactive system make it easy for AI to generate functional apps quickly, but the same patterns that make Vue approachable also create security blind spots.

10-point security checklist

1. 1.

   No v-html with user content

   critical

   Vue's v-html directive renders raw HTML and is the Vue equivalent of dangerouslySetInnerHTML. AI tools use it to render formatted content from APIs or databases. If any of that content contains user input, it's a direct XSS vulnerability. Sanitize with DOMPurify before using v-html.

2. 2.

   Navigation guards backed by server auth

   critical

   Vue Router navigation guards (beforeEach) are client-side only. AI tools implement auth checks here that redirect unauthenticated users. But the API endpoints those pages call must independently verify authentication — a navigation guard can be bypassed by calling the API directly.

3. 3.

   No secrets in Vite environment variables

   critical

   In Vite-based Vue apps, only variables prefixed with VITE_ are exposed to client code. AI tools sometimes use VITE_ for server-side secrets. Verify no API keys, database URLs, or service tokens use the VITE_ prefix. For Nuxt, check for runtimeConfig.public misuse.

4. 4.

   Pinia stores don't contain sensitive data

   high

   Pinia stores are inspectable via Vue DevTools and persist in memory. AI tools store auth tokens, user roles, and API keys in Pinia. Use httpOnly cookies for tokens and verify roles server-side instead of trusting store state.

5. 5.

   API calls include CSRF protection

   high

   Vue apps making API calls to a same-origin backend need CSRF tokens. AI-generated Axios or fetch configurations often skip CSRF token handling. Configure Axios to send cookies and include CSRF tokens in request headers.

6. 6.

   Nuxt server routes validate input

   high

   Nuxt server/ routes are the server-side equivalent of Next.js API routes. AI-generated server routes frequently skip input validation and authentication checks. Every server route must validate its input and verify the requesting user.

7. 7.

   Form submissions are validated server-side

   medium

   VeeValidate and other Vue form libraries provide client-side validation. AI tools rely exclusively on these. All validation must be duplicated on the server because client-side checks can be bypassed.

8. 8.

   Third-party component libraries are current

   medium

   AI tools often install Vue component libraries with known vulnerabilities. Run a dependency audit and update any vulnerable packages, especially UI libraries that render user content.

9. 9.

   SSR doesn't leak server state to client

   high

   In Nuxt SSR mode, server-fetched data is serialized and sent to the client for hydration. AI-generated data fetching sometimes includes sensitive fields (internal IDs, admin flags, other users' data) in the serialized state. Audit what data SSR sends to the client.

10. 10.

    Production build has no dev tools enabled

    low

    Check that Vue DevTools are disabled in production builds. AI-generated vue.config.js or nuxt.config.ts sometimes enables devtools for all environments. DevTools expose your entire component tree, store state, and routing structure.