@md-plugins/quasar-app-extension-vite-md-plugin 0.1.0-alpha.2 → 0.1.0-alpha.20

package/README.md

@@ -1,31 +1,88 @@
-Quasar App Extension md-plugin
-===
+# viteMdPluginAppExt
 
-_Be sure to change this readme as appropriate for your app extension._
+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.
 
-_Think about the organization of this file and how the information will be beneficial to the user._
+## Table of Contents
 
-> Add a short description of your App Extension. What does it do? How is it beneficial? Why would someone want to use it?
+- [Overview](#overview)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Configuration](#configuration)
+- [Contributing](#contributing)
+- [License](#license)
 
-A Quasar Project
+## 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](https://github.com/md-plugins/md-plugins/tree/dev/packages/viteMdPlugin).
+
+## Installation
+
+To install the `viteMdPluginAppExt` extension, use the following command:
 
-# Install
 ```bash
-quasar ext add md-plugin
+pnpm add @md-plugins/vite-md-plugin-app-ext
 ```
-Quasar CLI will retrieve it from the NPM registry and install the extension to your project.
 
+## What It Does
 
-# Uninstall
-```bash
-quasar ext remove md-plugin
+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:
+
+```javascript
+build: {
+  vueRouterMode: 'history', // Required for proper hash link handling
+  viteVuePluginOptions.include: [/\.(vue|md)$/], // Include Markdown files
+},
+framework: {
+  framework.autoImportVueExtensions: ['md', 'vue'], // Include Markdown files
+}
 ```
 
-# Info
-> Add longer information here that will help the user of your app extension.
+## Usage
+
+After installing the extension, you need to configure it in your Quasar project. Here are the steps to get started:
+
+1. **Import `@md-plugins/vite-md-plugin`:**
+
+   Update your `quasar.config.js` or `quasar.config.ts` to include the `@md-plugins/vite-md-plugin` extension:
+
+```js
+import { viteMdPlugin, type MenuItem } from '@md-plugins/vite-md-plugin'
+```
+
+2. **Import Your Sidebar Menu:**
+
+```js
+import siteConfig from './src/siteConfig'
+const { sidebar } = siteConfig
+```
+
+3. **Add the `viteMdPlugin` to the `vitePlugins` array:**
+
+```js
+      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.
+
+## Documentation
+
+In case this README falls out of date, please refer to the [documentation](https://md-plugins.netlify.app/quasar-app-extensions/vitemdpluginappext/overview) for the latest information.
 
-# Other Info
-> Add other information that's not as important to know
+## License
 
-# Donate
-If you appreciate the work that went into this App Extension, please consider [donating to Quasar](https://donate.quasar.dev).
+This project is licensed under the MIT License. See the [LICENSE](LICENSE.md) file for details.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@md-plugins/quasar-app-extension-vite-md-plugin",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.20",
   "description": "A Quasar app-ext for @md-plugins/viteMdPlugin",
   "author": "Jeff <galbraith64@gmail.com>",
   "license": "MIT",
@@ -22,8 +22,8 @@
     "md-plugins",
     "viteMdPlugin"
   ],
-  "dependencies": {
-    "@md-plugins/viteMdPlugin": "^0.1.0-alpha.2"
+  "devDependencies": {
+    "@md-plugins/vite-md-plugin": "0.1.0-alpha.20"
   },
   "scripts": {
     "test": "echo \"No test specified\" && exit 0"

package/src/index.js

@@ -6,31 +6,33 @@
  * Docs: https://quasar.dev/app-extensions/development-guide/index-api
  */
 
-function extendConfig(config, api) {
+function extendConfig(config) {
   // make sure 'vueRouterMode' has 'history' mode
-  if (api.ctx.build.vueRouterMode !== 'history') {
-    console.log('Changing vueRouterMode to "history"')
-    api.ctx.build.vueRouterMode = 'history'
+  if (config.build.vueRouterMode !== 'history') {
+    console.log('Changing vueRouterMode to "history" - required for hash links to work correctly')
+    config.build.vueRouterMode = 'history'
   }
 
-  api.ctx.build.viteVuePluginOptions.include = api.ctx.build.viteVuePluginOptions.include || []
-  api.ctx.build.viteVuePluginOptions.include.push(/\.(vue|md)$/)
+  // let Vite know to transpile md files
+  config.build.viteVuePluginOptions.include = config.build.viteVuePluginOptions.include || []
+  config.build.viteVuePluginOptions.include.push(/\.(vue|md)$/)
 
-  const extensions = new Set(api.ctx.framework.autoImportVueExtensions || [])
+  // let Vue know to auto import md files
+  const extensions = new Set(config.framework.autoImportVueExtensions || [])
   extensions.add('md')
   extensions.add('vue')
-  api.ctx.framework.autoImportVueExtensions = Array.from(extensions)
+  config.framework.autoImportVueExtensions = Array.from(extensions)
 }
 
 export default function (api) {
   // verify this is a Vite project
   if (!api.hasVite) {
-    console.error('This extension requires Vite')
+    throw new Error('This extension requires Vite')
   }
 
   api.compatibleWith('quasar', '^2.0.0')
   api.compatibleWith('@quasar/app-vite', '^2.0.0')
 
-  // here we extend /quasar.config, so we can add some Vite stuff
+  // here we extend /quasar.config, so we can add some Vite/Vue stuff
   api.extendQuasarConf(extendConfig)
 }