@md-plugins/quasar-app-extension-vite-md-plugin NP

viteMdPluginAppExt

The viteMdPluginAppExt is a Quasar App Extension that integrates the viteMdPlugin into your Quasar project. This extension allows you to use Markdown files as Vue components, enabling a seamless integration of Markdown content into your Quasar application.

Overview
Installation
Usage
Configuration
Contributing
License

Overview

The viteMdPluginAppExt extension provides a convenient way to use Markdown files in your Quasar project. It leverages the viteMdPlugin to transform Markdown content into Vue components, allowing you to write and manage content in Markdown while benefiting from the power of Vue and Quasar.

This App-Extension (app-ext) is for convenience only. For more granular control, you can use the viteMdPlugin directly in your Vite configuration. For more information, refer to the viteMdPlugin documentation.

Installation

To install the viteMdPluginAppExt extension, use the following command:

pnpm add @md-plugins/vite-md-plugin-app-ext

What It Does

The viteMdPluginAppExt extension does the following:

Integrates the viteMdPlugin into your Quasar project.
Allows you to use Markdown files as Vue components.
Provides a convenient way to manage and render Markdown content in your Quasar application.
Provides quasar.config changes so you don't have to manage the small things. Here is what it changes:

build: {
  vueRouterMode: 'history', // Required for proper hash link handling
  viteVuePluginOptions.include: [/\.(vue|md)$/], // Include Markdown files
},
framework: {
  framework.autoImportVueExtensions: ['md', 'vue'], // Include Markdown files
}

Usage

After installing the extension, you need to configure it in your Quasar project. Here are the steps to get started:

Import @md-plugins/vite-md-plugin:
Update your quasar.config.js or quasar.config.ts to include the @md-plugins/vite-md-plugin extension:

import { viteMdPlugin, type MenuItem } from '@md-plugins/vite-md-plugin'

Import Your Sidebar Menu:

import siteConfig from './src/siteConfig'
const { sidebar } = siteConfig

Add the viteMdPlugin to the vitePlugins array:

      vitePlugins: [
        viteMdPlugin(ctx.appPaths.srcDir + '/markdown', sidebar as MenuItem[]),
        // ...

Configuration

The viteMdPluginAppExt extension can be customized through various options. Here are some of the key configuration options:

vueRouterMode: Set to 'history' for proper hash link handling.
viteVuePluginOptions.include: Include Markdown files for Vite to transpile.
framework.autoImportVueExtensions: Enable auto-import for Markdown extensions.