DOCSEARCHbyAlgolia
Submit Docs

Vue 2 Documentation

repository·main·Indexed 20 days ago

https://github.com/vuejs/vue

A progressive JavaScript framework for building reactive, component-oriented user interfaces. This documentation covers Vue 2.7.16, including Single File Component (SFC) compilation via @vue/compiler-sfc, server-side rendering with vue-server-renderer, and the Vue 2 ecosystem including vue-router and vuex. Note: Vue 2 reached End of Life on December 31st, 2023.

Tokens
910
Snippets
1
Records
7
Agent score
100%

What's inside vue

  1. Overview of the Vue 2 Ecosystem

    main

    Vue 2 is a progressive framework for building user interfaces. Its ecosystem includes several supporting libraries to manage complexity in large Single-Page Applications (SPAs):

    ProjectDescription
    vue-routerSingle-page application routing
    vuexLarge-scale state management
    vue-cliProject scaffolding
    vue-loaderSingle File Component (*.vue file) loader for webpack
    vue-server-rendererServer-side rendering support
    vue-class-componentTypeScript decorator for a class-based API
    vue-rxRxJS integration
    vue-devtoolsBrowser DevTools extension

  3. Understand Vue 2 End of Life and Migration

    main

    Vue 2 reached End of Life (EOL) on December 31st, 2023. It no longer receives new features, updates, or security fixes.

    • New Projects: It is strongly recommended to use Vue 3 (available in the vuejs/core repository).
    • Existing Users: Current Vue 2 users are encouraged to follow the migration guide to upgrade to Vue 3.
    • Maintenance Options: If you must stay on Vue 2 but require security/compliance support, consider Vue 2 NES.

  4. Run the Vue.js SSR benchmark

    main

    The SSR benchmark is used for stress and regression testing to compare the performance of renderToString against renderToStream. The benchmark renders a large table (1000 rows, 10 columns) containing approximately 10,000 components and 30,000 elements.

    Note that renderToStream is designed to provide better performance (faster time-to-first-byte and non-event-loop-blocking) by piping content through a stream compared to renderToString.

    npm run bench:ssr

  5. Compile SFC parts using compiler-sfc

    main

    The @vue/compiler-sfc package provides specialized functions to compile individual blocks of a Single File Component:

    • parse: Parses the SFC into an AST.
    • compileTemplate: Compiles the <template> block into a render function.
    • compileScript: Compiles the <script> block.
    • compileStyle / compileStyleAsync: Compiles the <style> block(s).
    • rewriteDefault: Rewrites the default export of a component.

  6. Parse Single File Components (SFCs) with parseComponent

    main

    Use parseComponent to decompose a Single File Component string into its constituent parts (template, script, and styles). This function is maintained for backwards compatibility with tools like fork-ts-checker-webpack-plugin to differentiate between Vue 2 and Vue 3 SFC structures.

    It returns an object containing the parsed descriptor and blocks, which can be used to access specific parts of the component.

  7. Use SFC compilation types

    main

    When building tools that interact with the SFC compiler, you can use the following exported types for type safety:

    • SFCDescriptor: The parsed structure of the SFC.
    • SFCBlock, SFCScriptBlock, SFCCustomBlock: Represents individual blocks within the SFC.
    • SFCTemplateCompileOptions, SFCTemplateCompileResults: Options and results for template compilation.
    • SFCStyleCompileOptions, SFCStyleCompileResults: Options and results for style compilation.
    • SFCScriptCompileOptions: Options for script compilation.
    • CompilerOptions, WarningMessage: General compiler configuration and error/warning types.