Astro JS - Vue Integration

What is Vue.js?

Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. It is a progressive framework for building modern web applications. Vue.js is designed to be incrementally adoptable, which means you can use it as a library to add interactive components to existing web applications or as a full-fledged framework to build complex single-page applications. Astro allows us to integrate Vue.js components in Astro applications.

Vue Integration in Astro

Astro provides built-in support for Vue.js by using Vue adapter to render Vue components. You can write your favorite UI components in Vue and optimize them for performance using Astro. Let's see how to integrate Vue.js with Astro.

Get Started With Vue in Astro

Follow the steps below to integrate Vue.js with Astro:

Step 1: Install Vue Adapter

First, you need to install the Vue adapter for Astro. You can do this using the following command:

>> npm install @astrojs/vue

Step 2: Configure Vue in Astro

Next step is to apply the integration to your astro.config.ts and tsconfig.json files using the integrations property:

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue()],
});

Now, Add following code to your typescript configuration file (tsconfig.json)

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  }
}

Step 3: Create a Vue Component

Now, you can create a Vue component in your Astro project. You can keep your components in the '/src/components' directory. Here is an example of a simple Vue component −

// src/components/Counter.vue

<template>
    <div>
        <p>{{ count }}</p>
        <button @click="increment">Increment</button>
    </div>
</template>

Step 4: Use the Vue Component in Astro Page

Now, you can use the Vue component in your Astro page. You can import the component and use it in your Astro page like this −

// src/pages/index.astro

---
import Counter from '../components/Counter.vue';
---

<Counter/>

That's it! You have successfully integrated Vue.js with Astro. You can now create Vue components and use them in your Astro project.

Set Vue Options in Astro

The vue options are used to customize vue compiler. You can set vue options in astro.config.ts file. Here is an example of setting vue options in Astro −

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [
    vue({
      template: {
        compilerOptions: {
          // treat any tag that starts with ion- as custom elements
          isCustomElement: (tag) => tag.startsWith('ion-'),
        },
      },
      // ...
    }),
  ],
});