Vue UI Library and Application

Marmotte provides three composable plugins for Vue 3 + Vuetify projects. All of them include the same base setup: Vue, unplugin-vue-components (auto-import), and Vuetify.

Plugin	Use case
UILib	Distributable Vue component library
UIApp	Full Vue application (with vue-router)
UICommon	Shared base — use when composing your own stack

Building a Vue component library

// vite.config.ts
import { defineConfig } from "vite";
import { UILib } from "marmotte/vite/ui";

export default defineConfig({
  plugins: UILib({}),
});

UILib extends Lib with Vue-specific additions:

• All .vue files in src/ are added as entry points alongside TypeScript entries.
• A single style.css is produced, bundling all component styles.
• unplugin-vue-components writes auto-import declarations to src/components.d.ts.

Vuetify and Sass

Vuetify requires sass-embedded. Install it explicitly:

npm install --save-dev sass-embedded

To disable Vuetify entirely (e.g. for a non-Vuetify component library):

UILib({ vuetify: false });

Building a Vue application

// vite.config.ts
import { defineConfig } from "vite";
import { UIApp } from "marmotte/vite/ui";

export default defineConfig({
  plugins: UIApp({}),
});

UIApp adds vue-router/vite on top of UICommon. The router plugin must come before @vitejs/plugin-vue, which marmotte handles automatically.

vue-router writes typed router declarations to src/typed-router.d.ts.

To disable the router:

UIApp({ vueRouter: false });

Options

All three plugins share a common set of options through UICommonPluginOptions:

UILib({
  // Options passed directly to @vitejs/plugin-vue (deep-merged with defaults)
  vue: {
    /* ... */
  },

  // Options for unplugin-vue-components (deep-merged with defaults)
  vueComponents: {
    /* ... */
  },

  // Options for vite-plugin-vuetify, or false to disable
  vuetify: { styles: { configFile: "src/styles/settings.scss" } },
});

UILib additionally accepts all LibPluginOptions (entries, dts, externals, docs).

UIApp additionally accepts vueRouter options or false.

Plugin option objects (vue, vueComponents, vueRouter) are deep-merged with marmotte's defaults. Pass noDefaults: true inside any of them to use your options as-is without merging.

See the API reference for full option types.

Using UICommon directly

UICommon is the shared foundation. It returns the plugin array augmented with a ctx property for accessing the resolved DefaultVitePluginContext:

import { UICommon } from "marmotte/vite/ui";

const common = UICommon({});
const { ctx } = common;

// ctx.resolve("sourceDir") → /abs/path/to/src

This is useful when composing your own plugin stack on top of the shared Vue/Vuetify setup.