Vue Extensions

The Vue Extension makes sure to setup and run Vue.js properly. Make sure to add vue to your project package.json.

The extension provides the following options:

export interface VueExtensionOptions {
    components?: {
        [key: string]: Component | DefineComponent;
    };
    onBootstrap?: (app: App<Element>) => void;
    i18n?: {
        enable?: boolean;
        messagesRoute?: string;
    };
}

Features

Internationalization (i18n)

The Vue extension includes a built-in i18n system that automatically loads translations from your Statamic backend.

Features:

• Automatic translation loading via Axios
• Fallback locale support
• Document language detection
• Global injection for use in templates

Configuration:

RunThemeExtensions({
    vue: {
        i18n: {
            enable: true,
            messagesRoute: '/!/statamic-theme-extensions/lang.json' // default
        }
    }
});

Usage in components:

<template>
    <div>
        <h1>{{ $t('welcome.title') }}</h1>
        <p>{{ $t('welcome.message') }}</p>
    </div>
</template>

Form Validation

Pre-configured form validation using vee-validate and Yup with German locale defaults.

Features:

• All vee-validate rules available
• German error messages
• Yup schema validation support
• Validation on blur and model update

Usage:

<template>
    <form @submit="onSubmit">
        <Field name="email" :rules="validateEmail" v-slot="{ field, errors }">
            <input v-bind="field" type="email" />
            <span v-if="errors[0]">{{ errors[0] }}</span>
        </Field>
        <button type="submit">Submit</button>
    </form>
</template>

<script setup>
import { Field, useForm } from 'vee-validate';
import * as yup from 'yup';

const { handleSubmit } = useForm();

const validateEmail = yup.string().email().required();

const onSubmit = handleSubmit(values => {
    console.log('Form submitted:', values);
});
</script>

Pinia Integration

State management is available through Pinia integration.

Usage:

import { createPinia } from 'pinia';

const pinia = createPinia();

RunThemeExtensions({
    vue: {
        onBootstrap: (app) => {
            app.use(pinia);
        }
    }
});