Configuration

The following section is an overview of basic configuration for .

Most of the options discussed are specific to , for the rest of the available configuration options please check Vite's config reference.

Configuring Vite

You can configure Vite.js as usual using vite.config.ts, check Vite's plugins and config reference.

Alternatively, you can provide a vite option in iles.config.ts with the same options.

import { defineConfig } from 'iles'

export default defineConfig({
  vite: {
    plugins: [],
  },
})

Visit the Modules and Plugins guide for more details about the pre-configured Vite.js plugins.

Configuring îles

You may provide an iles.config.ts configuration file to customize settings related to markdown, component resolution, and other îles-specific features.

You can leverage your IDE's intellisense by using the defineConfig helper:

import { defineConfig } from 'iles'

export default defineConfig({
  siteUrl: 'https://nuraui.com',
  jsx: 'preact',
})

drafts

• Type: boolean
• Default: true in development, false when building

Whether to include drafts in pages and documents.

By default drafts will be displayed during development, but will be excluded when building the site.

When disabled, drafts will also be excluded from useDocuments.

modules

• Type: IlesModuleOption[]

modules to apply in the site. Read the Modules and Plugins guide.

vue

• Type: object
• Default:

vue: {
  template: {
    compilerOptions: {},
  },
}

Provides support for Single File Components with Vue 3.

To customize, refer to @vitejs/plugin-vue.

autoImport

• Type: object
• Default:

autoImport: {
  dts: true,
  include: [
    /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
    /\.vue$/,
    /\.vue\?vue/, // .vue
    /\.md$/, // .md
    /\.mdx$/, // .mdx
    /\.svelte$/, // .svelte
  ],
  imports: [
    'vue',
    // 'vue-i18n',
    // 'vue/macros',
    unheadVueComposablesImports,
    // '@vueuse/core',
    // 'pinia',
    {
      iles: [
        'usePage',
        'useRoute',
        'definePageComponent',
        'useDocuments',
      ],
    }
  ],
  dirs: [
    // 'src/hooks',
    'src/composables', // only root modules
    // 'src/composables/**', // all nested modules
    // 'src/utils',
    // 'src/stores',
  ],
  vueTemplate: true,
  resolvers: [
    /* ... */
  ],
}

Enables auto-importing APIs on-demand, and is leveraged internally to support automatic import of APIs and composables from vue, @unhead/vue and from the users's src/composables folder.

To customize, refer to unplugin-auto-import.

components

• Type: object
• Default:

components: {
  dts: true,
  extensions: ['vue', 'jsx', 'tsx', 'js', 'ts', 'mdx', 'svelte'],
  include: [/\.vue$/, /\.vue\?vue/, /\.mdx?/],
  dirs: `${srcDir}/components`,
  resolvers: [
    IlesComponentResolver,
    IlesLayoutResolver(appConfig),
  ],
  transformer: 'vue3',
}

Enables auto-importing Vue components, and is leveraged internally to support automatic component resolution in MDX files.

To customize, refer to unplugin-vue-components.

turbo (experimental)

• Type: boolean
• Default: false

Whether to enable SPA-like navigation for the site. See the guide for Turbo.

jsx

• Type: 'vue' | 'preact' | 'solid'
• Default: 'vue'

Which framework to use to compile .jsx and .tsx files.

prettyUrls

• Type: boolean
• Default: true

Whether to skip .html and trailing slashes in link hrefs and router paths.

Set prettyUrls: false to simplify the migration of an existing VitePress site without having to add redirects, or when deploying on services that don't support pretty urls (most do).

ssg

Options applied during site generation when running iles build.

ssg.beforePageRender

• Type: async (page: RouteToRender, config: AppConfig) => RouteToRender | void

This hook will be invoked before îles renders a page.

Modify page.rendered to alter the content of the page as needed.

ssg.onSiteRendered

• Type: async ({ pages: RouteToRender[], config: AppConfig }) => void

This hook will be invoked once îles has rendered the entire site.

ssg.manualChunks

Allows to configure how JS chunks for islands should be grouped.

ssg.sitemap

• Type: boolean
• Default:: true

Whether to generate a sitemap and reference it using a meta tag in all pages.

You must provide siteUrl to enable sitemap generation.

siteUrl

• Type: string

URL for the site in production, used to generate absolute URLs for the sitemap and social meta tags.

When set, it is exposed as site.url and site.canonical.

debug

• Type: boolean | 'log'
• Default: true

Whether to output more information about islands and hydration in development.

iles.config.ts Example

import { defineConfig } from 'iles'

import UnoCSS from 'unocss/vite'

export default defineConfig({
  siteUrl: 'https://nuraui.com',
  extendFrontmatter (frontmatter, filename) {
    if (filename.includes('/posts/'))
      frontmatter.layout = 'post'
  },
  markdown: {
    remarkPlugins: [
      'remark-gemoji',
    ],
  },
  modules: [
    '@islands/icons',
    '@islands/headings',
    '@islands/prism',
  ],
  vite: {
    plugins: [
      UnoCSS(),
    ],
  },
})