îles

Static Assets 🍃

îles relies on the powerful static asset handling provided by Vite to efficiently serve and manage static assets, such as CSS and images.

Place CSS, images, JavaScript modules, and other assets within the src directory for bundling and optimization by Vite.

index.html

Îles automatically injects an index.html entry page as required by Vite, so you don't need to include an index.html file in your project root.

However, you can provide a custom index.html entry page, giving you the flexibility to add external assets, such as link and script tags from CDNs, to all your pages.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

During development, Îles will automatically add the following shell script to the injected or user-provided index.html in the project root.

<script type="module" src="/@iles-entry"></script>

In Vue single-file components, link and script tags are ignored as side-effects, so external assets should not be included in the template section of layouts or pages.

useHead Composable

useHead can be used within the setup function or <script setup> of any Vue component.

This powerful composable allows you to add external assets, such as link and script tags from CDNs, either to specific pages or to layouts to apply them across all pages.

Auto-imported APIs and Composables
You don't need to import ref, computed, reactive, usePage, useRoute, definePageComponent, useDocuments, useHead, useSeoMeta, useScript. 
<script setup lang="ts">
import { computed } from 'vue'
  
useHead({
  htmlAttrs: { lang: 'en-US' },
  bodyAttrs: { class: 'dark-mode', 'data-theme': 'light' },
  link: [
    {
      href: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css',
      rel: 'stylesheet',
      integrity:
        'sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH',
      crossorigin: 'anonymous',
    },
  ],
  style: [
    {
      innerHTML: 'p { color: #26b72b; }',
    },
  ],
  noscript: [],
  // useScript can also be used to load scripts
  script: [
    {
      src: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js',
      integrity:
        'sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz',
      crossorigin: 'anonymous',
      tagPosition: 'bodyClose',
    },
    {
      innerHTML: `;(() => {
      const prefersDark = matchMedia('(prefers-color-scheme: dark)').matches
      const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
      if (setting === 'dark' || (prefersDark && setting !== 'light'))
        document.documentElement.classList.toggle('dark', true)
    })()`,
    },
  ],
})
</script>

useHead options support both static values and reactive variables, such as ref, computed, and reactive.

In addition to using an index.html entry page and the useHead composable, external static assets can be added through other methods discussed in the head and meta page.

Public folder

The public directory at your project root stores static files that do not require processing during the build.

Use the public folder for assets that:

  • Are not imported in source code (e.g., robots.txt).
  • Must retain their original file names.
  • Should be directly accessible via a URL (e.g., /logo.png).

For example, an image at public/logo.png can be referenced as:

<img src="/logo.png" alt="Logo">

Files placed in the public folder are copied as-is to the final output (by default, dist folder), making it ideal for assets like images, fonts, favicons, robots.txt, and manifest.webmanifest.

Last Updated:

Head And Meta
Islands