@breadev/vite

Vite plugins for Bread.

Writing Template

Conventions

Bread templates are published to npm registry, and they should follow the conventions below:

• Package name should start with bread-template-, @<organization name>/template-, or @<organization name>/bread-template-.
• Add bread and bread-template in the keywords field of your package.json.
• Setup files field to specify which files should be included (this field also specifies the files to be published).

Vite Plugin

// vite.config.ts
import Bread from '@breadev/vite'

export default {
  plugins: [
    Bread()
  ]
}

Note

If you do not provide any option, it will automatically load config file bread.config.{json|js|cjs|ts}.

// bread.config.ts
import { defineConfig } from '@breadev/vite'

export default defineConfig({
  // options
})

Override

Bread vite plugin will setup an alias mapping ~root/ to <template root>/src/.

This prefix ~root/ is also used for user overriding some files inside the template. That is to say that the alias ~root/ points to <user root>/ and <template root>/src/. When importing a module with ~root/components/Hello.vue, it will first check whether <user root>/components/Hello.vue exists, and if not, it will fallback to <template root>/src/components/Hello.vue.

This config field override is used to specify how to map directorires in user root to them in template root. The following config says that modules in <user root>/pages will override them in <template root>/src/pages.

export default defineConfig({
  override: {
    pages: './pages'
  }
})

There are another two alias for precise usage:

• ~user/ points to <user root>/
• ~template/ points to <template root>/src/

Generate Routes

import { defineConfig, Virtual } from '@breadev/vite'

const solutions = Virtual((code, id) => {
  return `export const solution = \`${code}\``;
}).directory('./solutions')

export default defineConfig({
  pages: [
    solutions
  ]
})

Virtual Modules

// Generated vue-route config
import Route from '~bread/route'

// Get pages metadata
// Glob files in the subdir of `<user root>/post`
import Posts from '~bread/pages/post'

// Get server-side data
// Evaluate `<user root>/config.{js|ts}` in the server-side and return its result
import Config from '~bread/server/config'

License

MIT License © 2021 XLor