Skip to content
Weblands

Configuration

The following section is an overview of basic configuration for Weblands.

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

Configuring Vite

You can provide a vite option in weblands.config.ts with the same options.

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


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

Configuring Weblands

You may provide an weblands.config.ts configuration file to customize settings related to weblands-specific features.

You can leverage your IDE’s intellisense with jsdoc type hints or use the defineConfig helper:

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


export default defineConfig({
  siteUrl: 'https://iles-docs.netlify.app',
})
ssg.sitemap
  • Type: boolean
  • Default: true
concurrency
  • Type: number
  • Default: 1

Max pages rendering in parallel

criticalCss
  • Type: CrittersOptions
  • Default:
{
  logLevel: 'warn',
  external: true,
  inlineFonts: true,
  preloadFonts: true,
}

Critical css inlining options (https://www.npmjs.com/package/critters)

purgeCss
  • Type: CrittersOptions
  • Default:
{
    defaultExtractor: (content: string) => (
      content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
    ),


    safelist: [
      /-(leave|enter|appear)(|-(to|from|active))$/,
      /^(?!(|.*?:)cursor-move).+-move$/,
      /^router-link(|-exact)-active$/,
      /data-v-.*/,
    ],
  }

Allow to generate page specific CSS after for each page after it will be rendered Options passed to https://www.npmjs.com/package/purgecss.

siteUrl
  • Type: string

URL for the site in production, used to generate absolute URLs for the sitemap.

sitemapIgnore
  • Type: string[]
  • Default: ['/404']

Array of routes to exclude from sitemap.

capojs
  • Type: boolean
  • Default: false

Sort head elements with capojs

Configure Your App

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 },
      ]
    }
  },


  router: {
    scrollBehavior (current, previous, savedPosition) {
      // Configure the scroll behavior
    },
  },


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


  routesToPrerender() {
    // Provide a list of dynamic urls to pre-render
  }
})
  • 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.

router
  • Type: RouterOptions

Configure vue-router by providing options such as scrollBehavior and linkActiveClass.

routesToPrerender
  • Type: string[]
  • Default: []

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

Config example

import { defineConfig, UserConfig } from '@belkins-group/weblands';


import dotenv from 'dotenv';
dotenv.config();


const prodSiteUrl = 'https://static-v2-1fc.web.app';
const devSiteUrl = 'http://localhost:5000';
const siteUrl = process.env.NODE_ENV === 'production'
  ? prodSiteUrl
  : devSiteUrl;


export default defineConfig({
  siteUrl: siteUrl,


  ssg: {
    concurrency: 1,
  },


  criticalCss: {
    logLevel: 'info',
  },


  purgeCss: {
    safelist: [/slide.*/]
  },


  vite: {
    plugins: [],
  },
} as UserConfig);