DOCSEARCHbyAlgolia
Submit Docs

Awesome Vue.js

website·Indexed 30 days ago

https://awesome-vue.js.org/

A curated list of Vue.js resources, including UI components, libraries, frameworks, developer tools, and open-source projects. It provides categorized links to utilities for state management (Pinia, Vuex), routing, and prerendering, as well as real-world application examples, starter templates, and learning courses.

Tokens
18.6K
Snippets
12
Records
144
Agent score
62%

What's inside Awesome Vue

  1. Build command-line interfaces using Vue runtimes

    To create interactive command-line (CLI) applications using Vue, you can use specialized runtimes such as blessed-vue, which allows writing command line UIs in Vue, or temir, designed for interactive command-line apps.
    # blessed-vue: https://github.com/lyonlai/blessed-vue
# temir: https://github.com/webfansplz/temir

  2. Vue.js development and prototyping tools

    Various tools for building, isolating, and prototyping Vue components:

    • vue-dev-server: A small development server for building Vue components.
    • Storybook: A UI development environment (supports v3.2+).
    • Bit: Manage and reuse Vue components between projects without changing source code.
    • ComponentFixture: A component designed to develop and test other components by automatically binding props.
    • vue-cli-template-dev-server: Development server for building custom vue-cli templates.
    • codesandbox: Online IDE and prototyping tool for rapid Vue development.

  3. Vue.js state management and architecture examples

    Examples focusing on Vuex and application structure:

    • vuex-feature-scoped-structure: Demonstrates a feature-scoped Vuex application structure.
    • vuex-examples: Real-world app examples using Vuex.
    • vue-vuex-todomvc: TodoMVC with Vuex and E2E tests using Cypress.io.
    • Vue.js Best Practices Example Project: Implementation using Vue Router, Vuex, and Vuelidate.

  4. Start Vue.js projects with specialized UI or Architecture templates

    For projects requiring specific architectural patterns or UI libraries:

    • Enterprise/Opinionated: vue-enterprise-boilerplate (Vue CLI 3) or VueCharged Template (Vue 2, Vuex, Router, I18n).
    • UI Frameworks: Awesome Vue Boilerplate (Element-UI, Tailwind CSS) or Vuetify-tailwind-animate-starter (Vuetify, Tailwind, Animate.css).
    • TypeScript: vue-vuex-typescript-webpack-seed for a seed project with Vuex, TypeScript, and SCSS.
    • Vue 3: janak or Vue3-SPA-starter-template (includes Pinia, i18n, and Stripe).

  5. Recommended Vue.js learning courses

    A curated list of educational resources for learning Vue.js, ranging from fundamental CRUD application development to advanced library creation and Vue 3 mastery:

    • Learn Vue by Building and Deploying a CRUD App: Focuses on Vue fundamentals using Test-Driven Development (TDD).
    • Introduction to Vue.js: Covers basics including directives, modifiers, components, reactive programming, Nuxt.js, and Vuex.
    • Advanced Vue.js Features from the Ground Up: Teaches how to build custom routing, state management, form validation, and internationalization libraries.
    • Become a Ninja with Vue 3: A step-by-step guide to building a complete application using Vue 3, Vue CLI, TypeScript, and the Composition API, featuring exercises with automated tests.

  6. Implement SVG icons and dynamic SVG loading in Vue

    Depending on the requirement, use these SVG utilities:

    • vue-inline-svg: Loads SVG sources dynamically and inlines the <svg> tag, allowing CSS/JS style manipulation (Vue 2 & 3).
    • vue-svg-sprite: Plugin/component/directive for using SVG sprites (Vue 2 & 3).
    • vue-svgicon: Tool for creating SVG icon components (Vue 2).
    • vue-content-loading: Component for building SVG loading skeleton cards (Facebook-style).
    • vue-annotator: Allows page annotation using SVG elements like rect and polygon.

  7. Print Vue components to paper

    To handle printing of HTML elements or components from a Vue application:

    • For Vue 3: Use vue-to-print to print components in the browser (supports Chrome, Safari, Firefox, and Edge).
    • For Vue 2: Use vue-html-to-paper mixin to print HTML elements to paper.

  8. Improve Vue.js code style and type safety

    The following tools help improve code readability, maintainability, and type checking:

    • vue-types and vue-ts-types: Provide prop type definitions (the latter is TypeScript-first).
    • eslint-plugin-vue: The official ESLint plugin for Vue.js projects.
    • vue-decorators: Provides decorators for Vue.js (beta).
    • vue-computed-helpers: Offers helper functions for computed properties.

  9. Implement lazy loading for images and components in Vue

    Various plugins exist to optimize performance via lazy loading:

    • General Purpose: vue-lazyload (Images/Components), vue3-lazyload (Vue 3 images), and lazyload-vue (wrapper for vanilla-lazyload).
    • Progressive Loading: vue-progressive-image, v-lazy-img (Vue 2), and pimg provide progressive image loading transitions.
    • Intersection Observer Based: vue-clazy-load, vue-lazy-this, and v-lazy-component use the Intersection Observer API to trigger loading when visible.
    • Specialized: vue-lazy-background-images (CSS backgrounds) and vue-lazy-youtube-video (YouTube embeds).

  10. Integrate Payment Gateways in Vue

    Libraries for handling payments within Vue components:

    • Stripe:
      • vue-stripe-checkout: Simple checkout plugin.
      • vue-stripe-elements or vue-stripe-js (Vue 3): Component collections for Stripe.js.
      • vue-stripe-payment: Wrapper for jquery.payment.
    • PayPal: vue-paypal-checkout wrapper for paypal-checkout.
    • Plaid: vue-plaid-link for Plaid Link integration.

  11. Extend Vue Router functionality

    Beyond the official vue-router, these libraries extend routing capabilities:

    • vue-tidyroutes & vue-routisan: Provide alternative, more fluent or decentralized ways to define routes.
    • vue-error-page: Wraps router-view to display error pages without altering the URL.
    • vue-router-sitemap: Generates sitemap.xml based on the router configuration.
    • vue-lang-router: Handles language routing and URL localization for Vue 2 and 3.
    • vue-middleware: Adds middleware support to Vue routing.
    • vue-route-props: Automatically binds router queries to the VM as props.

  12. Render Vue components outside their parent DOM hierarchy using Portals

    For scenarios where a component's template needs to be rendered in a different part of the DOM (e.g., modals or tooltips), use the following libraries:

    • portal-vue: Renders templates anywhere in the DOM at the virtualDOM level without moving physical nodes.
    • vue-dom-portal: Provides an escape hatch for DOM elements within Vue.js components.