===
Vue
===

Vue 3 integration with Litestar Vite using the Composition API and Single File Components.

Quick Start
-----------

.. code-block:: bash

    litestar assets init --template vue

This creates a Vue 3 project with TypeScript support.

Project Structure
-----------------

Vue applications use **SPA mode** - Vite serves the ``index.html`` directly:

.. code-block:: text

    my-app/
    ├── app.py              # Litestar backend (API only)
    ├── index.html          # Vite entry point (root level)
    ├── package.json
    ├── vite.config.ts
    ├── tsconfig.json
    └── src/
        ├── main.ts         # Vue entry point
        ├── App.vue         # Root component
        └── style.css

Backend Setup
-------------

In SPA mode, Litestar serves only your API endpoints. The VitePlugin handles
serving the frontend automatically:

.. literalinclude:: /../examples/vue/app.py
   :language: python
   :start-after: # [docs-start:spa-vite-config]
   :end-before: # [docs-end:spa-vite-config]
   :caption: examples/vue/app.py

Key points:

- ``mode="spa"`` tells Vite to serve ``index.html`` for non-API routes
- No ``template_config`` needed - Jinja is not used in SPA mode
- ``TypeGenConfig()`` enables TypeScript type generation from OpenAPI

Vite Configuration
------------------

.. literalinclude:: /../examples/vue/vite.config.ts
   :language: typescript
   :caption: vite.config.ts

Key configuration:

- ``input`` - Entry point(s) for your application
- ``resourceDir`` - Source directory (explicitly set to ``src``)
- The plugin auto-reads ``assetUrl``, ``bundleDir`` from ``.litestar.json`` (generated by Python)

HTML Entry Point
----------------

In SPA mode, ``index.html`` lives at the project root and uses standard Vite syntax:

.. literalinclude:: /../examples/vue/index.html
   :language: html
   :caption: index.html

.. note::

   Unlike template mode, SPA mode doesn't use Jinja helpers like ``{{ vite() }}``.
   Vite processes the HTML directly.

Vue Component
-------------

.. code-block:: html

    <script setup lang="ts">
    import { ref, onMounted } from "vue";

    interface Summary {
      app: string;
      headline: string;
    }

    const summary = ref<Summary | null>(null);

    onMounted(async () => {
      const res = await fetch("/api/summary");
      summary.value = await res.json();
    });
    </script>

    <template>
      <div>
        <h1>Vue + Litestar</h1>
        <p v-if="summary">{{ summary.headline }}</p>
      </div>
    </template>

Running
-------

.. code-block:: bash

    # Recommended: Litestar proxies Vite automatically in dev mode
    litestar run --reload

    # Alternative: Two-process setup
    litestar assets serve  # Vite dev server
    litestar run --reload  # Backend only (in another terminal)

Type Generation
---------------

With ``types=TypeGenConfig()`` enabled, run:

.. code-block:: bash

    litestar assets generate-types

This generates TypeScript types from your OpenAPI schema. See :doc:`/usage/types`
for more details.

See Also
--------

- :doc:`inertia` - Vue with Inertia.js for server-side routing
- :doc:`/usage/types` - TypeScript type generation
- `Example: vue <https://github.com/litestar-org/litestar-vite/tree/main/examples/vue>`_