Development 💻

Default App Structure 📂

src/
  ├── components/
  │    ├── ReadingTime.vue
  │    └── Author.vue
  │
  ├── layouts/
  │    └── default.vue
  │
  ├── pages/
  │    ├── posts/
  │    │    ├── index.vue
  │    │    └── hello.vue
  │    └── index.vue
  │
  └── app.ts

Pages 🛣

Routes will be auto-generated for files in the src/pages dir with the same file structure.
If your add new page during the dev mode you need to restart weblands.

<template>
  <main class="page">
    <HeroSection />
  </main>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HeroSection from '@/components/pages/home/HeroSection.vue';

export default defineComponent({
  components: {
    HeroSection,
  },
});
</script>

Layouts 📐

Add a src/layouts/default.vue:

<template>
  <div>
    <p>Some default layout content shared across all pages</p>
    <slot />
  </div>
</template>

In a layout file, the content of the page will be displayed in the <slot /> component.

App.ts 🌐

Weblands will pre-configure a Vue 3 app that will load any [pages] defined in the site.

You may provide additional configuration in src/app.ts, and leverage intellisense by using the defineApp helper.

import { defineApp } from '@belkins-group/weblands'

export default defineApp({
  head: () => {
    return {
      meta: [
        { name: 'description', content: '<provide description>' },
        { property: 'author', content: site.author },
      ]
    }
  },

  enhanceApp ({ app, head, router }) {
    // Configure the app to add plugins or custom behavior.
  },

  routesToPrerender() {
    // Provide a list of dynamic urls to pre-render
  }
})

head

Type: HeadObject | (context: AppContext) => HeadObject

Set the page title, meta tags, additional CSS, or scripts using @vueuse/head.

enhanceApp

Type: (context: AppContext) => Promise<void>

A hook where you can add plugins to the Vue app, or do anything else prior to the app being mounted.

routesToPrerender

Type: string[]

Pass an callback that will generate dynamic routes to pre-render and returns an array of them