How to use YAML with Vue & Vite

In modern web development, YAML (YAML Ain't Markup Language) is widely used for configuration files and data storage due to its human-readable format. Vue.js, a progressive JavaScript framework, is often chosen for its reactivity and component-based architecture.

In this blog post, we will explore how to efficiently use YAML data within a Vue.js application. This can be especially useful in scenarios where configuration or structured data is required.

Installing Required Packages

Firstly, a YAML parser is required as browsers are unable to directly parse YAML. We will utilize

# NPM
npm install -D @modyfi/vite-plugin-yaml

# Yarn
yarn add @modyfi/vite-plugin-yaml

# Pnpm
pnpm i -D @modyfi/vite-plugin-yaml

Add Yaml Plugin to Vite

import ViteYaml from '@modyfi/vite-plugin-yaml'

export default defineConfig({
  plugins: [
    ViteYaml()
    // ...
  ]
})

Vite handles everything else. Now, we can create our yaml files in our project directory and start utilizing them.

My usual practice involves using YAML files to define constants that are used consistently throughout the app and don't require frequent updates. Another useful scenario is generating fake data to mimic an API response, enabling you to develop the front-end to mirror an API object without needing to make the actual API call

Create your YAML files

For testing purposes, let's make a sample YAML file. I usually store these files in the src/data folder. Arrange your project in a way that works best for you

user:
  name: John
  email: johndoe@example.com
  favorites_books:
    - id: 100
      name: 'Lord of the Rings'
      author: 'J.R.R Tolkien'
    - id: 101
      name: 'Do Androids Dream of Electric Sheep'
      author: 'Philip K. Dick'

Loading and Parsing YAML Data

All you need to do is include the YAML file in your Vue component, and its contents will be converted to a JavaScript object

<script setup lang="ts">
    import data from '@/data/user.yaml'

    const user = data.user
</script>
<template>
    <div>
        <p>{{ user.name}}</p>
        <p>{{ user.email}}</p>
    </div>
</template>

We set an array of objects in our YAML file. We can use them just like any other array of objects data.

<script setup lang="ts">
    import data from '@/data/user.yaml'

    const user = data.user
</script>
<template>
    <div v-for="book in user.favorite_books">
        <p>{{ book.name }}</p>
        <p>{{ book.author }}</p>
    </div>
</template>

Done

The fusion of YAML data with Vue.js presents a variety of potentials, such as controlling app settings or importing external data in a clear and organized manner. By following the steps detailed above, you can effectively introduce YAML into your Vue projects

Happy Coding ✌️