app/components

Runable detects Vue components in this directory and makes them available in templates.

<!-- app/components/AppLogo.vue -->
<template>
  <strong>Acme</strong>
</template>

<!-- app/pages/index.vue -->
<template>
  <AppLogo />
</template>

You can add multiple sources and control generated names:

export default defineConfig({
  components: [
    "./app/components",
    {
      dirs: "./app/components/ui",
      prefix: "U",
      pathPrefix: false,
    },
  ],
});

Runable writes declarations to .app/components.d.ts. If autocomplete does not reflect a new component, restart runable prepare or the development server.

Define the name inside the component

A name declared in the file replaces the name inferred from its path:

<!-- app/components/button.vue -->
<script setup lang="ts">
defineOptions({
  name: "PrimaryAction",
});
</script>

<template>
  <button type="button"><slot /></button>
</template>

The component is then available as <PrimaryAction />, even though the file is named button.vue. Runable also recognizes the Options API and defineComponent():

export default defineComponent({
  name: "PrimaryAction",
});

The name must be a static string. A componentName function defined in runable.config.ts takes priority. Without a declared or configured name, Runable uses the file name and, depending on pathPrefix, its parent directories.

This detection also applies to components written directly in JavaScript or TypeScript files:

// app/components/layout.ts
export default defineComponent({
  name: "RunableLayout",
  setup() {
    // ...
  },
});

Components provided by Runable

Runable registers several internal components alongside project components:

<template>
  <nav>
    <RunableLink to="/projects">Projects</RunableLink>
  </nav>

  <RunablePage />
</template>