Update the app extension docs to work with Vue 3 (#6232)

docs/guides/displays.md

@@ -98,7 +98,7 @@ To be read by the Admin App, your custom display's Vue component must first be b
 recommend bundling your code using Rollup. To install this and the other development dependencies, run this command:
 
 ```bash
-npm i -D rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-terser rollup-plugin-vue@5 vue-template-compiler
+npm i -D rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace rollup-plugin-terser rollup-plugin-vue @vue/compiler-sfc
 ```
 
 You can then use the following Rollup configuration within `rollup.config.js`:
@@ -106,6 +106,7 @@ You can then use the following Rollup configuration within `rollup.config.js`:
 ```js
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
+import replace from '@rollup/plugin-replace';
 import { terser } from 'rollup-plugin-terser';
 import vue from 'rollup-plugin-vue';
 
@@ -115,7 +116,16 @@ export default {
 		format: 'es',
 		file: 'dist/index.js',
 	},
-	plugins: [vue(), nodeResolve(), commonjs(), terser()],
+	plugins: [
+		vue(),
+		nodeResolve(),
+		commonjs(),
+		replace({
+			'process.env.NODE_ENV': JSON.stringify('production'),
+			preventAssignment: true,
+		}),
+		terser(),
+	],
 };
 ```
 

docs/guides/interfaces.md

@@ -55,6 +55,7 @@ for more info on what can go into this object.
 
 <script>
 export default {
+	emits: ['input'],
 	props: {
 		value: String,
 	},
@@ -88,7 +89,7 @@ To be read by the Admin App, your custom interface's Vue component must first be
 We recommend bundling your code using Rollup. To install this and the other development dependencies, run this command:
 
 ```bash
-npm i -D rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-terser rollup-plugin-vue@5 vue-template-compiler
+npm i -D rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace rollup-plugin-terser rollup-plugin-vue @vue/compiler-sfc
 ```
 
 You can then use the following Rollup configuration within `rollup.config.js`:
@@ -96,6 +97,7 @@ You can then use the following Rollup configuration within `rollup.config.js`:
 ```js
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
+import replace from '@rollup/plugin-replace';
 import { terser } from 'rollup-plugin-terser';
 import vue from 'rollup-plugin-vue';
 
@@ -105,7 +107,16 @@ export default {
 		format: 'es',
 		file: 'dist/index.js',
 	},
-	plugins: [vue(), nodeResolve(), commonjs(), terser()],
+	plugins: [
+		vue(),
+		nodeResolve(),
+		commonjs(),
+		replace({
+			'process.env.NODE_ENV': JSON.stringify('production'),
+			preventAssignment: true,
+		}),
+		terser(),
+	],
 };
 ```
 

docs/guides/layouts.md

@@ -131,7 +131,7 @@ To be read by the Admin App, your custom layouts's Vue component must first be b
 recommend bundling your code using Rollup. To install this and the other development dependencies, run this command:
 
 ```bash
-npm i -D rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-terser rollup-plugin-vue@5 vue-template-compiler
+npm i -D rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace rollup-plugin-terser rollup-plugin-vue @vue/compiler-sfc
 ```
 
 You can then use the following Rollup configuration within `rollup.config.js`:
@@ -139,6 +139,7 @@ You can then use the following Rollup configuration within `rollup.config.js`:
 ```js
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
+import replace from '@rollup/plugin-replace';
 import { terser } from 'rollup-plugin-terser';
 import vue from 'rollup-plugin-vue';
 
@@ -148,7 +149,16 @@ export default {
 		format: 'es',
 		file: 'dist/index.js',
 	},
-	plugins: [vue(), nodeResolve(), commonjs(), terser()],
+	plugins: [
+		vue(),
+		nodeResolve(),
+		commonjs(),
+		replace({
+			'process.env.NODE_ENV': JSON.stringify('production'),
+			preventAssignment: true,
+		}),
+		terser(),
+	],
 };
 ```
 

docs/guides/modules.md

@@ -25,7 +25,7 @@ export default {
 	icon: 'box',
 	routes: [
 		{
-			path: '/',
+			path: '',
 			component: ModuleComponent,
 		},
 	],
@@ -35,7 +35,8 @@ export default {
 - `id` — The unique key for this module. It is good practice to scope proprietary interfaces with an author prefix.
 - `name` — The human-readable name for this module.
 - `icon` — An icon name from the material icon set, or the extended list of Directus custom icons.
-- `routes` — Details the routes in your module per the Vue router.
+- `routes` — Details the routes in your module. The routes are registered as nested routes with the module's `id`
+  serving as the base path.
 
 ::: tip TypeScript
 
@@ -130,7 +131,7 @@ To be read by the Admin App, your custom module's Vue component must first be bu
 recommend bundling your code using Rollup. To install this and the other development dependencies, run this command:
 
 ```bash
-npm i -D rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-terser rollup-plugin-vue@5 vue-template-compiler
+npm i -D rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace rollup-plugin-terser rollup-plugin-vue @vue/compiler-sfc
 ```
 
 You can then use the following Rollup configuration within `rollup.config.js`:
@@ -138,6 +139,7 @@ You can then use the following Rollup configuration within `rollup.config.js`:
 ```js
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
+import replace from '@rollup/plugin-replace';
 import { terser } from 'rollup-plugin-terser';
 import vue from 'rollup-plugin-vue';
 
@@ -147,7 +149,16 @@ export default {
 		format: 'es',
 		file: 'dist/index.js',
 	},
-	plugins: [vue(), nodeResolve(), commonjs(), terser()],
+	plugins: [
+		vue(),
+		nodeResolve(),
+		commonjs(),
+		replace({
+			'process.env.NODE_ENV': JSON.stringify('production'),
+			preventAssignment: true,
+		}),
+		terser(),
+	],
 };
 ```