Styling

Horn does not introduce a custom styling system. You use Vue and Vite styling exactly as you normally would.

Common options

  • import global CSS from app/app.vue
  • use <style scoped> in SFC pages and layouts
  • use CSS Modules if your Vite setup enables them
  • use utility CSS frameworks through Vite plugins and normal CSS entry imports

Global styles

<script setup lang="ts">
import './assets/app.css'
</script>

Because app/app.vue is the document shell, it is the best place for global resets and app-wide theme styles.

Route-local styles

Use route-local styles when a page or layout owns a visual concern. This keeps app shell styles small and makes route code easier to move.