DevExtreme Vue - DevExtreme CLI

DevExtreme CLI is a set of command-line tools to be used with the DevExtreme controls library.

npm i -g devextreme-cli

Alternatively, you can use npx to execute DevExtreme CLI commands without installing the CLI globally. Examples in this article illustrate both approaches.

Add the DevExtreme layout template to an existing Angular application:

devextreme add angular-template [--layout][--empty][--resolve-conflicts]
// ===== or =====
npx -p devextreme-cli devextreme add angular-template [--layout][--empty][--resolve-conflicts]

The following command adds a view to an application that uses the DevExtreme layout template for Angular, Vue, or React:

devextreme add view view-name [--icon]
// ===== or =====
npx -p devextreme-cli devextreme add view view-name [--icon]

• --layout
  Specifies the DevExtreme layout to add. Available values:

  • side-nav-outer-toolbar (default)
  • side-nav-inner-toolbar

  Both layouts are illustrated in this article.

• --empty
  Specifies whether to skip sample views generation (default: false).

• --icon
  Specifies the view's icon (default: folder). You can choose an icon from the DevExtreme icon library.

• --resolve-conflicts (Angular only)
  Specifies whether to override the existing app.component or create a component with another name. Available values:

  • createNew (default)
  • override (NOTE: all changes in the overridden files will be lost)

  If you created a new component, register it in app.module.ts:

  app.module.ts

  // ...
  import { AppComponent } from './app1.component';
  // ...

See Also

• Create and Configure a Widget in Angular, React, and Vue.

The ThemeBuilder UI is a tool that allows you to create custom themes in the browser; its CLI counterpart allows you to do the same via commands.

The following command exports theme variables as a .less or .scss file:

devextreme export-theme-vars [--base-theme][--input-file][--output-format][--output-file][--base][--help]
// ===== or =====
npx -p devextreme-cli devextreme export-theme-vars [--base-theme][--input-file][--output-format][--output-file][--base]

Theme metadata is a JSON object that describes the theme. It is used to export or import a theme in the ThemeBuilder UI. Below is an example of theme metadata.

{
    "items": [
        {
            "key": "@base-text-color",
            "value": "rgba(94, 33, 33, 0.87)"
        },
        {
            "key": "@base-accent",
            "value": "rgba(64, 156, 199, 1)"
        }
    ],
    "baseTheme": "material.blue.light.compact",
    "outputColorScheme": "custom-scheme",
    "makeSwatch": true,
    "version": "19.1.4",
    "assetsBasePath": "../../../node_modules/devextreme/dist/css/"
}

The metadata object contains the following properties:

• items
  An array that describes customized theme variables.

  • key
    A theme variable's name.
  • value
    The theme variable's value.

• baseTheme
  A predefined DevExtreme theme which the custom theme is based on.

• outputColorScheme
  The custom theme's color scheme.

• makeSwatch
  A flag that indicates whether the theme is a color swatch.

• version
  The target DevExtreme version.

• assetsBasePath
  A path to the folder that contains the DevExtreme icons and fonts folders. This property is used only if the icons and fonts are not in the same folder as your custom theme.

Run the following command to export the metadata as a .json file:

devextreme export-theme-meta [--base-theme][--input-file][--output-file][--base][--help]
// ===== or =====
npx -p devextreme-cli devextreme export-theme-meta [--base-theme][--input-file][--output-file][--base]

• --base-theme
  Specifies a base theme's name (default: generic.light).

• --input-file
  Specifies the name of the file that contains input data (a .json file with metadata or a .less or .scss file with Bootstrap variables).

• --output-file
  Specifies the output file name.

• --output-format
  Specifies the format of the output variables: less or scss (default: less or the extension extracted from the --output-file value (if it contains any)).

• --output-color-scheme
  Specifies the custom color scheme name (default: custom-scheme).

• --make-swatch
  If present, creates a color swatch, i.e., adds a CSS scope to each CSS rule (.dx-swatch-xxx, where xxx is the value from the --output-color-scheme parameter).

• --base
  Exports only base variables used to produce derived variables.

• --assetsBasePath
  Specifies a path to the folder that contains the DevExtreme icons and fonts folders. Use this argument if the icons and fonts are not in the same folder as your custom theme.

Generate a new custom color swatch that uses Generic Dark as a base theme:

npx -p devextreme-cli devextreme build-theme --base-theme="generic.dark" --make-swatch --output-color-scheme="custom"

Generate a new pink color scheme based on the Material Blue Light theme, use constants from the pink.json file:

npx -p devextreme-cli devextreme build-theme --base-theme="material.blue.light" --input-file="pink.json" --output-color-scheme="pink"

Export base variables for the Generic Carmine theme in LESS format:

npx -p devextreme-cli devextreme export-theme-vars --base-theme="generic.carmine" --output-format="less" --base