Vite Plugin

Houdini’s Vite Plugin is responsible for generating the code necessary to power its GraphQL APIs. Adding it to your project is done in your vite config file. Make sure that Houdini’s plugin comes before SvelteKit:

import sveltekit from '@sveltejs/kit/vite'
import houdini from 'houdini/vite'

export default {
    plugins: [houdini(), sveltekit()]

The plugin is primarily responsible for a few tasks:

  • transforming graphql tags into store references
  • generating the hidden load functions for our routes
  • watching your project source for changes to validate and process your project
  • watching for changes in your APIs schema


The plugin can be optionally configured with an object containing any of the config values as well as the configFile key which can be used to provide an absolute path to your houdini.config.js (useful in monorepos).