mirror of
https://github.com/directus/directus.git
synced 2026-04-25 03:00:53 -04:00
Merge branch 'main' into aggregation
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
const path = require('path');
|
||||
const path = require('path/posix');
|
||||
const fse = require('fs-extra');
|
||||
const dirTree = require('directory-tree');
|
||||
|
||||
|
||||
@@ -19,8 +19,12 @@ If you're experiencing issues or think you have found a problem in Directus, be
|
||||
8. Check for [existing Issues](https://github.com/directus/directus/issues?q=is%3Aissue) (and
|
||||
[Discussions](https://github.com/directus/directus/discussions)) that match your problem
|
||||
|
||||
::: tip Source Contributors Those who have installed from source should also remove all dependencies
|
||||
(`npx lerna clean -y`) and then reinstall them (`npm install`). :::
|
||||
::: tip Source Contributors
|
||||
|
||||
Those who have installed from source should also remove all dependencies (`npx lerna clean -y`) and then reinstall them
|
||||
(`npm install`).
|
||||
|
||||
:::
|
||||
|
||||
If you're still experiencing a problem after completing the above steps, you can chat through things on our
|
||||
[community support](#community-support) or [report a bug](/contributing/introduction/#bug-reporting).
|
||||
|
||||
@@ -86,7 +86,7 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
## 2. Install Dependencies and Configure the Buildchain
|
||||
## 2. Install Dependencies
|
||||
|
||||
Set up a package.json file by running:
|
||||
|
||||
@@ -95,38 +95,14 @@ npm init -y
|
||||
```
|
||||
|
||||
To be read by the Admin App, your custom display's Vue component must first be bundled into a single `index.js` file. We
|
||||
recommend bundling your code using Rollup. To install this and the other development dependencies, run this command:
|
||||
recommend bundling your code using the directus-extension CLI from our `@directus/extension-sdk` package. The CLI
|
||||
internally uses a Rollup configuration tailored specifically to bundling Directus extensions. To install the Extension
|
||||
SDK, run this command:
|
||||
|
||||
```bash
|
||||
npm i -D rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser rollup-plugin-vue @vue/compiler-sfc
|
||||
npm i -D @directus/extension-sdk
|
||||
```
|
||||
|
||||
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 { terser } from 'rollup-plugin-terser';
|
||||
import vue from 'rollup-plugin-vue';
|
||||
|
||||
export default {
|
||||
input: 'src/index.js',
|
||||
output: {
|
||||
format: 'es',
|
||||
file: 'dist/index.js',
|
||||
},
|
||||
external: ['vue', '@directus/extension-sdk'],
|
||||
plugins: [vue(), nodeResolve(), commonjs(), terser()],
|
||||
};
|
||||
```
|
||||
|
||||
::: tip Building multiple extensions
|
||||
|
||||
You can export an array of build configurations, so you can bundle (or even watch) multiple extensions at the same time.
|
||||
See the [Rollup configuration file documentation](https://rollupjs.org/guide/en/#configuration-files) for more info.
|
||||
|
||||
:::
|
||||
|
||||
## 3. Develop Your Custom Display
|
||||
|
||||
The display itself is simply a function or a Vue component, providing a blank canvas for creating anything you need.
|
||||
@@ -136,7 +112,7 @@ The display itself is simply a function or a Vue component, providing a blank ca
|
||||
To build the display for use within Directus, run:
|
||||
|
||||
```bash
|
||||
npx rollup -c
|
||||
npx directus-extension build
|
||||
```
|
||||
|
||||
Finally, move the output from your display's `dist` folder into your project's `/extensions/displays/my-custom-display`
|
||||
|
||||
@@ -77,7 +77,7 @@ export default {
|
||||
- `field` — The key of the field.
|
||||
- `primaryKey` — The current item's primary key.
|
||||
|
||||
## 2. Install Dependencies and Configure the Buildchain
|
||||
## 2. Install Dependencies
|
||||
|
||||
Set up a package.json file by running:
|
||||
|
||||
@@ -86,38 +86,14 @@ npm init -y
|
||||
```
|
||||
|
||||
To be read by the Admin App, your custom interface's Vue component must first be bundled into a single `index.js` file.
|
||||
We recommend bundling your code using Rollup. To install this and the other development dependencies, run this command:
|
||||
We recommend bundling your code using the directus-extension CLI from our `@directus/extension-sdk` package. The CLI
|
||||
internally uses a Rollup configuration tailored specifically to bundling Directus extensions. To install the Extension
|
||||
SDK, run this command:
|
||||
|
||||
```bash
|
||||
npm i -D rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser rollup-plugin-vue @vue/compiler-sfc
|
||||
npm i -D @directus/extension-sdk
|
||||
```
|
||||
|
||||
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 { terser } from 'rollup-plugin-terser';
|
||||
import vue from 'rollup-plugin-vue';
|
||||
|
||||
export default {
|
||||
input: 'src/index.js',
|
||||
output: {
|
||||
format: 'es',
|
||||
file: 'dist/index.js',
|
||||
},
|
||||
external: ['vue', '@directus/extension-sdk'],
|
||||
plugins: [vue(), nodeResolve(), commonjs(), terser()],
|
||||
};
|
||||
```
|
||||
|
||||
::: tip Building multiple extensions
|
||||
|
||||
You can export an array of build configurations, so you can bundle (or even watch) multiple extensions at the same time.
|
||||
See the [Rollup configuration file documentation](https://rollupjs.org/guide/en/#configuration-files) for more info.
|
||||
|
||||
:::
|
||||
|
||||
## 3. Develop your Custom Interface
|
||||
|
||||
The interface itself is simply a Vue component, which provides an blank canvas for creating anything you need.
|
||||
@@ -127,7 +103,7 @@ The interface itself is simply a Vue component, which provides an blank canvas f
|
||||
To build the interface for use within Directus, run:
|
||||
|
||||
```bash
|
||||
npx rollup -c
|
||||
npx directus-extension build
|
||||
```
|
||||
|
||||
Finally, move the output from your interface's `dist` folder into your project's
|
||||
|
||||
@@ -82,7 +82,7 @@ The props you can use in an layout are:
|
||||
- `filters` (sync) - The user's currently active filters.
|
||||
- `search-query` (sync) - The user's current search query.
|
||||
|
||||
## 2. Install Dependencies and Configure the Buildchain
|
||||
## 2. Install Dependencies
|
||||
|
||||
Set up a package.json file by running:
|
||||
|
||||
@@ -91,38 +91,14 @@ npm init -y
|
||||
```
|
||||
|
||||
To be read by the Admin App, your custom layouts's Vue component must first be bundled into a single `index.js` file. We
|
||||
recommend bundling your code using Rollup. To install this and the other development dependencies, run this command:
|
||||
recommend bundling your code using the directus-extension CLI from our `@directus/extension-sdk` package. The CLI
|
||||
internally uses a Rollup configuration tailored specifically to bundling Directus extensions. To install the Extension
|
||||
SDK, run this command:
|
||||
|
||||
```bash
|
||||
npm i -D rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser rollup-plugin-vue @vue/compiler-sfc
|
||||
npm i -D @directus/extension-sdk
|
||||
```
|
||||
|
||||
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 { terser } from 'rollup-plugin-terser';
|
||||
import vue from 'rollup-plugin-vue';
|
||||
|
||||
export default {
|
||||
input: 'src/index.js',
|
||||
output: {
|
||||
format: 'es',
|
||||
file: 'dist/index.js',
|
||||
},
|
||||
external: ['vue', '@directus/extension-sdk'],
|
||||
plugins: [vue(), nodeResolve(), commonjs(), terser()],
|
||||
};
|
||||
```
|
||||
|
||||
::: tip Building multiple extensions
|
||||
|
||||
You can export an array of build configurations, so you can bundle (or even watch) multiple extensions at the same time.
|
||||
See the [Rollup configuration file documentation](https://rollupjs.org/guide/en/#configuration-files) for more info.
|
||||
|
||||
:::
|
||||
|
||||
## 3. Develop Your Custom Layout
|
||||
|
||||
The layout itself is simply a Vue component, which provides an blank canvas for creating anything you need.
|
||||
@@ -132,7 +108,7 @@ The layout itself is simply a Vue component, which provides an blank canvas for
|
||||
To build the layout for use within Directus, run:
|
||||
|
||||
```bash
|
||||
npx rollup -c
|
||||
npx directus-extension build
|
||||
```
|
||||
|
||||
Finally, move the output from your layout's `dist` folder into your project's `/extensions/layouts/my-custom-layout`
|
||||
|
||||
@@ -119,7 +119,7 @@ instance of the `collectionsStore` using `system.useCollectionsStore()`, but tha
|
||||
|
||||
If you setup a route with a parameter, you can pass it in as a prop.
|
||||
|
||||
## 2. Install Dependencies and Configure the Buildchain
|
||||
## 2. Install Dependencies
|
||||
|
||||
Set up a package.json file by running:
|
||||
|
||||
@@ -128,38 +128,14 @@ npm init -y
|
||||
```
|
||||
|
||||
To be read by the Admin App, your custom module's Vue component must first be bundled into a single `index.js` file. We
|
||||
recommend bundling your code using Rollup. To install this and the other development dependencies, run this command:
|
||||
recommend bundling your code using the directus-extension CLI from our `@directus/extension-sdk` package. The CLI
|
||||
internally uses a Rollup configuration tailored specifically to bundling Directus extensions. To install the Extension
|
||||
SDK, run this command:
|
||||
|
||||
```bash
|
||||
npm i -D rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser rollup-plugin-vue @vue/compiler-sfc
|
||||
npm i -D @directus/extension-sdk
|
||||
```
|
||||
|
||||
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 { terser } from 'rollup-plugin-terser';
|
||||
import vue from 'rollup-plugin-vue';
|
||||
|
||||
export default {
|
||||
input: 'src/index.js',
|
||||
output: {
|
||||
format: 'es',
|
||||
file: 'dist/index.js',
|
||||
},
|
||||
external: ['vue', '@directus/extension-sdk'],
|
||||
plugins: [vue(), nodeResolve(), commonjs(), terser()],
|
||||
};
|
||||
```
|
||||
|
||||
::: tip Building multiple extensions
|
||||
|
||||
You can export an array of build configurations, so you can bundle (or even watch) multiple extensions at the same time.
|
||||
See the [Rollup configuration file documentation](https://rollupjs.org/guide/en/#configuration-files) for more info.
|
||||
|
||||
:::
|
||||
|
||||
## 3. Develop Your Custom Module
|
||||
|
||||
The module itself is simply a Vue component, which provides an blank canvas for creating anything you need.
|
||||
@@ -169,7 +145,7 @@ The module itself is simply a Vue component, which provides an blank canvas for
|
||||
To build the module for use within Directus, run:
|
||||
|
||||
```bash
|
||||
npx rollup -c
|
||||
npx directus-extension build
|
||||
```
|
||||
|
||||
Finally, move the output from your module's `dist` folder into your project's `/extensions/modules/my-custom-module`
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@directus/docs",
|
||||
"private": false,
|
||||
"version": "9.0.0-rc.80",
|
||||
"version": "9.0.0-rc.81",
|
||||
"description": "",
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
|
||||
@@ -151,6 +151,30 @@ directus.transport.url = 'https://api2.example.com';
|
||||
You can tap into the transport through `directus.transport`. If you are using the (default) `AxiosTransport`, you can
|
||||
access axios through `directus.transport.axios`.
|
||||
|
||||
#### Intercepting requests and responses
|
||||
|
||||
Axios transport offers a wrapper around Axios interceptors to make it easy for you to inject/eject interceptors.
|
||||
|
||||
```ts
|
||||
const requestInterceptor = directus.transport.requests.intercept((config) => {
|
||||
config.headers['My-Custom-Header'] = 'Header value';
|
||||
return config;
|
||||
});
|
||||
|
||||
// If you don't want the interceptor anymore, remove it
|
||||
requestInterceptor.eject();
|
||||
```
|
||||
|
||||
```ts
|
||||
const responseInterceptor = directus.transport.responses.intercept((response) => {
|
||||
console.log('Response received', { response });
|
||||
return response;
|
||||
});
|
||||
|
||||
// If you don't want the interceptor anymore, remove it
|
||||
responseInterceptor.eject();
|
||||
```
|
||||
|
||||
## Items
|
||||
|
||||
You can get an instance of the item handler by providing the collection (and type, in the case of TypeScript) to the
|
||||
|
||||
Reference in New Issue
Block a user