Quickstart

This quickstart guide will help you get up and running with Psitta (Vue) in no time.

Prerequisites

Ensure that you have the following prerequisites:

• Node.js installed on your development environment
• PNPM installed on your system
• Your preferred IDE (Visual Studio Code is recommended)

Installation

First, scaffold a Vue app using Vite:

  $ pnpm create vite@latest my-psitta-app --template vue

Then, navigate to your project directory and install Psitta along with the Vue integration:

  $ cd my-psitta-app
  $ pnpm install @psitta/core @psitta/vue
  $ pnpm dev

Next, run the development server:

pnpm dev

Configuration

1. Create a file called psitta.ts in your project's root directory and add the following code:

// psitta.ts
import { psitta } from '@psitta/core'

// Define your message translations here
const messages = {
  'Hello {user}': {
    es: 'Hola {user}'
  },
  'Today is {now}': {
    es: 'Hoy es {now}'
  }
} as const

psitta({
  locales: ['en', 'es'], // Specify supported locales
  defaultLocale: 'en', // Set the default locale (used in the source code)
  messages, // Pass your message translations
})

declare module '@psitta/core' {
  interface Register {
    messages: typeof messages
  }
}

2. Import Psitta configuration globally in your entry point file (src/main.js):

// src/main.js

import '../psitta.ts'
import { createPsitta } from '@psitta/vue'
import { getConfig } from '@psitta/core'
import { ref } from 'vue'
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

const locale = ref(getConfig().defaultLocale); 

const Psitta = createPsitta({
  locale,
})

createApp(App).use(Psitta).mount('#app') 
createApp(App).mount('#app') 

Localization

Use the t() function from @psitta/vue to localize messages in your Vue components:

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { t } from '@psitta/vue'
</script>

<template>

  <div>
    {{ t('Hello {user}', { user: 'Motoko' }) }}
  </div>

  <div>
    {{ t('Today is {now}', {
      now: [new Date(), { dateStyle: 'long' }],
    }) }}
  </div>

  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo">
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo">
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

Locale Switching

To switch the locale in your application using Psitta, you can utilize the useLocale composable provided by @psitta/vue. Here's how you can do it:

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { t } from '@psitta/vue'
import { useLocale } from '@psitta/vue'
const locale = useLocale() 
</script>

<template>
  <div>
    {{ t('Hello {user}', { user: 'Motoko' }) }}
  </div>

  <div>
    {{ t('Today is {now}', {
      now: [new Date(), { dateStyle: 'long' }],
    }) }}
  </div>

  <button @click="locale = locale === 'es' ? 'en' : 'es'">
    Toggle locale
  </button>

  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo">
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo">
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

What's Next?

Now that you've learned the basics, you can explore more advanced features based on your requirements:

• Refer to the Guides to learn how to accomplish specific goals and tasks with Psitta.
• Consult the API Reference for detailed documentation on Psitta's functions and methods, enabling you to leverage its full capabilities.
• If you're curious about the API design decisions behind Psitta, delve into the Explanations to gain insights into its architecture and key concepts.