ngosangns Knowledge Base

Vue And Nuxt

#technology#vue#nuxt#frontend

Updated: 2026-10-07

Vue and Nuxt projects share a core set of decisions around validation, state and which UI kit to adopt. The sections record the Vue tricks that come up in practice, such as checking validations with Array.every and Array.some, and then map the library behind each decision. Pinia, Vue Router, Vee-validate, Vitest and Vuetify each appear with the alternatives that fit a different project size.

Vue And Nuxt Tips

Validating

  • Validating multiple components: use Array.every() to check that all validations pass
  • Showing/hiding the "Save changes" button:
    • At least one property changed: Array.some()
    • All validations pass: Array.every()

Reactive

  • Class Component Decorator - making a variable non-reactive:
    • Declare the variable inside a method
    • Declare the property without an initial value and only assign it inside a method

Other

  • Vue certification exam: certification.vuejs.org
  • Test Vue code online: vue-live.surge.sh
  • Build a full-stack scaffold: sidebase.io

Libraries And Tools

Form

  • Form Validation:
    • Vee-validate: powerful, easy to use, well integrated (medium and large projects)
    • Vuelidate-next: simple, model-based (small and medium projects)
    • vue-tiny-validate: compact (small projects)
    • vorms: another option
  • Form Generator/Builder:
    • vue-flow-form: form flows (wizards, surveys)
    • form-create: powerful generator that builds dynamic forms from JSON
    • blitzar: another option
    • Vue form builder: visual drag-and-drop

State Management

  • Pinia: the official Vue state management

Routing

  • Vue Router: the official router
  • vue-router-better-scroller: improves scroll behavior

UI Components And Design Systems

  • Design Systems: Nuxt UI, UI Libs, Varlet, Vuestic UI, Naive UI, Equal, Vuesax, Quasar, Element Plus, Buefy, Vue Storefront UI, Maz-UI, Indielayer, Vueye, Chakra UI Vue, Vunix, Inkline, Radix Vue, PrimeVue, Vue Data UI, una-ui
  • Arco Design Vue: @arco-design/web-vue 2.58.0 (2026-04-16), Vue >= 3.2, MIT, same system as the React library. No IE. From 2.44.3, import components from @arco-design/web-vue and icons from @arco-design/web-vue/es/icon (the exports map added for Nuxt 3). The docs quick start prints npm install --save-dev. The package README prints a normal npm install. Stated browsers: Edge >= 79, Firefox >= 78, Chrome >= 64, Safari >= 12, Opera >= 53. The longer note is in React Next. Site: https://arco.design/vue
  • Material Design: Vuetify, Vue Material, Varlet (Mobile)
  • Specialized UI components:
    • Notification: notivue
    • Toast: vue3-toastify
    • Multiple-select: vue-multiselect
    • Calendar: Qalendar, Gantt Schedule Timeline Calendar
    • Text editor: vue-quill (Quill)
    • Telephone input: intl-tel-input

Table And Data Grid

  • Sortable element: sortablejs-vue3
  • Datagrid table: handsontable.com (Excel-like)
  • nuxt-lego: a Nuxt.js module for building "Lego"-style UIs
  • vue-devui: a UI component set
  • G2Plot: a data visualization charting library
  • arco-design-vue: a high-quality UI component set

Testing

  • Vitest: modern testing framework, compatible with Vite
  • Cypress: end-to-end testing

HTTP Requests

  • vue-request: a hook for managing HTTP requests

I18n

  • vue-i18n: the official i18n library
  • fluent-vue: based on Project Fluent

Utilities

  • vueuse: a collection of composition API utilities
  • vue-bind-once: one-time data binding
  • vue-composable: a collection of composable functions
  • Resource: madewithvuejs.com
  • React in Vue / Vue in React: veaury
  • Vue query: vue-query, vue-api-query
  • vue-promised: promises for templates
  • floating-vue: build floating components
  • tresjs: Three.js in Vue
  • vue-termui: Vue 3 custom renderer for terminal UIs on OpenTUI (flexbox, forms, Vite plugin with in-terminal HMR); ground-up rewrite from the old TuiBox/Yoga stack — see Vue TermUI
  • NativeScript-Vue: build native apps
  • fullpage.js: full-page scrolling
  • vue-mathlive: math field

CSS

  • pinceau: CSS compiler

Tools - Online Tools

  • Histoire: generate documentation — Vite-native component story books for Vue 3 and Svelte; see Histoire
  • Vue Devtools: available in the browser

Design System For Mobile

  • Framework7

Interview

Template

  • nuxtwind-daisy
  • Admin template: admin-one-vue-tailwind, vue-element-admin

Cheatsheets

  • (PDF references)

See also: React Next · CSS Tools · Vuejs Interview Questions