@md-plugins/quasar-app-extension-vite-md-plugin 0.1.0-alpha.10

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024-present, MD-PLUGINS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,88 @@
+# 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.
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Configuration](#configuration)
+- [Contributing](#contributing)
+- [License](#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](https://github.com/md-plugins/md-plugins/tree/dev/packages/viteMdPlugin).
+
+## Installation
+
+To install the `viteMdPluginAppExt` extension, use the following command:
+
+```bash
+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:
+
+```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
+}
+```
+
+## 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.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE.md) file for details.

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@md-plugins/quasar-app-extension-vite-md-plugin",
+  "version": "0.1.0-alpha.10",
+  "description": "A Quasar app-ext for @md-plugins/viteMdPlugin",
+  "author": "Jeff <galbraith64@gmail.com>",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">= 20",
+    "npm": ">= 5.6.0",
+    "yarn": ">= 1.6.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "quasar",
+    "app",
+    "app extension",
+    "extension",
+    "markdown",
+    "md-plugins",
+    "viteMdPlugin"
+  ],
+  "dependencies": {
+    "@md-plugins/vite-md-plugin": "0.1.0-alpha.10"
+  },
+  "scripts": {
+    "test": "echo \"No test specified\" && exit 0"
+  }
+}

package/src/index.js

@@ -0,0 +1,38 @@
+/*global console*/
+/**
+ * Quasar App Extension index/runner script
+ * (runs on each dev/build)
+ *
+ * Docs: https://quasar.dev/app-extensions/development-guide/index-api
+ */
+
+function extendConfig(config) {
+  // make sure 'vueRouterMode' has 'history' mode
+  if (config.build.vueRouterMode !== 'history') {
+    console.log('Changing vueRouterMode to "history" - required for hash links to work correctly')
+    config.build.vueRouterMode = 'history'
+  }
+
+  // let Vite know to transpile md files
+  config.build.viteVuePluginOptions.include = config.build.viteVuePluginOptions.include || []
+  config.build.viteVuePluginOptions.include.push(/\.(vue|md)$/)
+
+  // let Vue know to auto import md files
+  const extensions = new Set(config.framework.autoImportVueExtensions || [])
+  extensions.add('md')
+  extensions.add('vue')
+  config.framework.autoImportVueExtensions = Array.from(extensions)
+}
+
+export default function (api) {
+  // verify this is a Vite project
+  if (!api.hasVite) {
+    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/Vue stuff
+  api.extendQuasarConf(extendConfig)
+}