docs/
└── tutorials/
└── vue/
├── index.mdx
├── 01-introduction/
│ ├── what-is-vue.mdx
│ ├── why-learn-vue.mdx
│ ├── vue-features.mdx
│ ├── vue-vs-react.mdx
│ ├── vue-vs-angular.mdx
│ ├── vue-architecture.mdx
│ └── how-vue-works.mdx
├── 02-environment-setup/
│ ├── install-nodejs-and-npm.mdx
│ ├── install-vue-devtools.mdx
│ ├── setup-vscode-for-vue.mdx
│ ├── create-vue-project.mdx
│ ├── vite-and-vue.mdx
│ └── verify-installation.mdx
├── 03-first-vue-application/
│ ├── project-structure.mdx
│ ├── main-ts-and-app-vue.mdx
│ ├── mount-vue-application.mdx
│ ├── run-development-server.mdx
│ ├── single-file-components.mdx
│ └── build-and-preview.mdx
├── 04-template-syntax/
│ ├── template-fundamentals.mdx
│ ├── text-interpolation.mdx
│ ├── attribute-binding.mdx
│ ├── event-handling.mdx
│ ├── event-modifiers.mdx
│ ├── dynamic-arguments.mdx
│ ├── conditional-rendering.mdx
│ ├── list-rendering.mdx
│ └── template-best-practices.mdx
├── 05-reactivity-fundamentals/
│ ├── what-is-reactivity.mdx
│ ├── ref-and-reactive.mdx
│ ├── computed-properties.mdx
│ ├── watchers-and-watcheffect.mdx
│ ├── reactive-state-updates.mdx
│ ├── deep-and-shallow-reactivity.mdx
│ ├── readonly-and-shallowreadonly.mdx
│ └── reactivity-best-practices.mdx
├── 06-components/
│ ├── component-fundamentals.mdx
│ ├── create-reusable-components.mdx
│ ├── script-setup.mdx
│ ├── component-props.mdx
│ ├── component-events.mdx
│ ├── component-v-model.mdx
│ ├── slots-and-fallback-content.mdx
│ ├── named-and-scoped-slots.mdx
│ ├── provide-and-inject.mdx
│ ├── dynamic-components.mdx
│ └── component-communication.mdx
├── 07-composition-api/
│ ├── composition-api-overview.mdx
│ ├── setup-and-script-setup.mdx
│ ├── lifecycle-hooks.mdx
│ ├── composables-fundamentals.mdx
│ ├── create-custom-composables.mdx
│ ├── composable-reusability.mdx
│ ├── composables-and-reactivity.mdx
│ └── composition-vs-options-api.mdx
├── 08-typescript-with-vue/
│ ├── typescript-vue-setup.mdx
│ ├── typing-component-props.mdx
│ ├── typing-component-events.mdx
│ ├── typing-refs-and-reactive-state.mdx
│ ├── typing-slots.mdx
│ ├── typing-composables.mdx
│ ├── typing-template-refs.mdx
│ ├── typing-provide-and-inject.mdx
│ └── vue-tsc-and-type-checking.mdx
├── 09-directives-and-rendering/
│ ├── built-in-directives.mdx
│ ├── v-if-and-v-show.mdx
│ ├── v-for-and-key.mdx
│ ├── v-bind-and-v-on.mdx
│ ├── v-model-and-form-binding.mdx
│ ├── custom-directives.mdx
│ ├── directive-modifiers.mdx
│ ├── render-functions.mdx
│ └── jsx-and-tsx-with-vue.mdx
├── 10-forms-and-validation/
│ ├── form-fundamentals.mdx
│ ├── input-and-textarea-binding.mdx
│ ├── checkbox-and-radio-binding.mdx
│ ├── select-and-multiselect.mdx
│ ├── form-submission.mdx
│ ├── form-validation.mdx
│ ├── custom-form-components.mdx
│ ├── dynamic-forms.mdx
│ └── accessible-forms.mdx
├── 11-routing-with-vue-router/
│ ├── vue-router-installation.mdx
│ ├── router-configuration.mdx
│ ├── router-link-and-router-view.mdx
│ ├── route-parameters.mdx
│ ├── query-parameters.mdx
│ ├── nested-routes.mdx
│ ├── navigation-guards.mdx
│ ├── lazy-loaded-routes.mdx
│ ├── route-meta-and-permissions.mdx
│ ├── route-level-data-loading.mdx
│ └── navigation-error-handling.mdx
├── 12-state-management-with-pinia/
│ ├── state-management-overview.mdx
│ ├── install-and-configure-pinia.mdx
│ ├── define-a-pinia-store.mdx
│ ├── state-getters-and-actions.mdx
│ ├── use-stores-in-components.mdx
│ ├── store-composition.mdx
│ ├── store-testing.mdx
│ ├── persistence-and-storage.mdx
│ └── state-management-best-practices.mdx
├── 13-api-and-http-integration/
│ ├── fetch-api-with-vue.mdx
│ ├── axios-and-vue.mdx
│ ├── create-an-api-service.mdx
│ ├── loading-and-error-states.mdx
│ ├── api-response-types.mdx
│ ├── request-cancellation.mdx
│ ├── pagination-and-filtering.mdx
│ ├── authentication-integration.mdx
│ └── runtime-data-validation.mdx
├── 14-lifecycle-and-advanced-reactivity/
│ ├── lifecycle-in-depth.mdx
│ ├── watch-vs-watcheffect.mdx
│ ├── flush-timing-and-cleanup.mdx
│ ├── template-refs.mdx
│ ├── nexttick.mdx
│ ├── custom-ref.mdx
│ ├── effect-scope.mdx
│ └── reactivity-debugging.mdx
├── 15-styling-and-ui/
│ ├── scoped-css.mdx
│ ├── global-styles.mdx
│ ├── css-modules.mdx
│ ├── dynamic-classes-and-styles.mdx
│ ├── css-transitions.mdx
│ ├── transition-and-transitiongroup.mdx
│ ├── tailwind-css-with-vue.mdx
│ ├── component-libraries.mdx
│ └── design-systems.mdx
├── 16-animation-and-user-experience/
│ ├── transition-basics.mdx
│ ├── list-transitions.mdx
│ ├── route-transitions.mdx
│ ├── loading-indicators.mdx
│ ├── optimistic-ui-updates.mdx
│ └── responsive-user-interfaces.mdx
├── 17-testing-and-quality/
│ ├── vue-testing-overview.mdx
│ ├── vitest-setup.mdx
│ ├── vue-test-utils.mdx
│ ├── component-unit-testing.mdx
│ ├── composable-testing.mdx
│ ├── pinia-store-testing.mdx
│ ├── router-testing.mdx
│ ├── api-mocking.mdx
│ ├── end-to-end-testing-with-playwright.mdx
│ ├── eslint-and-prettier.mdx
│ └── type-checking-in-ci.mdx
├── 18-performance-optimization/
│ ├── rendering-performance.mdx
│ ├── computed-caching.mdx
│ ├── list-virtualization.mdx
│ ├── lazy-loading-components.mdx
│ ├── code-splitting.mdx
│ ├── bundle-analysis.mdx
│ ├── performance-profiling.mdx
│ └── optimization-best-practices.mdx
├── 19-ssr-and-meta-frameworks/
│ ├── server-side-rendering-overview.mdx
│ ├── hydration-fundamentals.mdx
│ ├── nuxt-overview.mdx
│ ├── nuxt-pages-and-layouts.mdx
│ ├── nuxt-data-fetching.mdx
│ ├── nuxt-server-routes.mdx
│ ├── seo-and-metadata.mdx
│ └── deployment-with-nuxt.mdx
├── 20-accessibility-and-security/
│ ├── accessible-vue-components.mdx
│ ├── semantic-html-and-keyboard-navigation.mdx
│ ├── accessible-dialogs-and-menus.mdx
│ ├── vue-security-fundamentals.mdx
│ ├── cross-site-scripting-prevention.mdx
│ ├── safe-template-rendering.mdx
│ ├── authentication-and-authorization.mdx
│ ├── dependency-security.mdx
│ └── production-readiness-checklist.mdx
├── 21-advanced-vue/
│ ├── async-components.mdx
│ ├── teleport.mdx
│ ├── suspense.mdx
│ ├── custom-renderers-overview.mdx
│ ├── plugin-development.mdx
│ ├── library-development.mdx
│ ├── web-components-with-vue.mdx
│ ├── migration-from-vue-2.mdx
│ └── migration-and-upgrades.mdx
├── 22-deployment-and-devops/
│ ├── production-builds.mdx
│ ├── environment-variables.mdx
│ ├── static-hosting-deployment.mdx
│ ├── deployment-to-cloud-platforms.mdx
│ ├── dockerize-vue-application.mdx
│ ├── nginx-and-web-server-configuration.mdx
│ ├── ci-cd-for-vue.mdx
│ └── monitoring-and-error-tracking.mdx
├── 23-projects/
│ ├── interactive-counter.mdx
│ ├── todo-management-app.mdx
│ ├── weather-dashboard.mdx
│ ├── expense-tracker.mdx
│ ├── ecommerce-storefront.mdx
│ ├── admin-dashboard.mdx
│ ├── full-stack-vue-application.mdx
│ └── production-capstone.mdx
├── reference/
│ ├── vue-template-syntax-cheatsheet.mdx
│ ├── reactivity-api-reference.mdx
│ ├── composition-api-reference.mdx
│ ├── vue-router-reference.mdx
│ ├── pinia-reference.mdx
│ ├── common-errors-and-solutions.mdx
│ ├── glossary.mdx
│ └── official-resources.mdx
└── assets/
├── images/
├── diagrams/
└── examples/