DevExtreme Vue - Create a DevExtreme Application

If you are starting a project from scratch, use the DevExtreme Vue Template. It is a simple application with a navigation menu and several sample views in a responsive layout (see live preview).

You can generate the application with the DevExtreme CLI:

npx -p devextreme-cli devextreme new vue-app app-name
cd app-name
npm run serve

The application already contains the DataGrid and Form components. You can find their configurations in the src\views\display-data.vue and src\views\profile.vue files correspondingly.

For further information about DevExtreme Vue components, refer to the following resources:

• Component Configuration Syntax
• Demos
• API Reference

For more information about the structure and contents of the DevExtreme Vue Template, continue reading this article.

The application includes two layouts. The only difference between them is where the toolbar is located.

• Outer Toolbar (default)
  

• Inner Toolbar
  

To generate a new application with an inner toolbar, set the --layout flag to side-nav-inner-toolbar:

npx devextreme-cli new vue-app app-name --layout=side-nav-inner-toolbar

To switch to another layout after the application is created, open the src\router.js file and change the import path from ./layouts/side-nav-outer-toolbar to ./layouts/side-nav-inner-toolbar:

import defaultLayout from './layouts/side-nav-inner-toolbar';

Run the following command to add a new view. --icon specifies an icon from the DevExtreme icon library.

npx devextreme add view view-name [--icon=IconName]

You can find the added view under the src\views folder. This command also creates a navigation menu item for the added view in the src\app-navigation.js file.

Edit the src\app-navigation.js file to configure navigation menu items. Each item configuration can have the following fields:

• text - the item's text

• icon - the item's icon

• path - a navigation path associated with the item

• items - child items

{
    text: 'Category',
    icon: 'folder',
    items: [{
        text: 'About',
        path: '/about'
    }]
}

In the closed state, the navigation menu is partially visible because it displays item icons. If the items do not have icons, you can hide the menu. To do this, open the SideNavOuterToolbar or SideNavInnerToolbar component (depending on the used layout) and change the drawerOptions() computed property as follows:

// ...
<script>
// ...
export default {
    // ...
    computed: {
        drawerOptions() {
            // ...
            return {
                // ...
                minMenuSize: 0
            };
        },
        // ...
    },
    // ...
};
</script>

The application template uses the DevExtreme Toolbar component. The Toolbar is part of the HeaderToolbar component whose configuration is in the src\components\header-toolbar.vue file. To add a custom toolbar item, open this file and add a DxItem element inside DxToolbar. Refer to the items help section for information on DxItem attributes.

The following code adds a search button to the toolbar:

<template>
    <header class="header-component">
        <DxToolbar class="header-toolbar">
            <!-- ... -->
            <DxItem
                location="after">
                <template #default>
                    <DxButton
                        icon="search"
                        @click="searchFunc"
                    />
                </template>
            </DxItem>
            <!-- ... --->
        </DxToolbar>
    </header>
</template>
<script>
// ...
export default {
    props: {
        // ...
        searchFunc: Function
    },
    // ...
};
</script>

<template>
    <div class="side-nav-outer-toolbar">
        <header-toolbar ...
            :search-func="search"
        />
        <!-- ... -->
    </div>
</template>
<script>
// ...
export default {
    // ...
    methods: {
        // ...
        search() {
            console.log("search");
        }
    },
    // ...
};
</script>

In the code above, the button click handler is declared in the SideNavOuterToolbar component. This component applies when the outer toolbar layout is used. If the application uses the inner toolbar layout, add the same code to the SideNavInnerToolbar component.

The DevExtreme Vue Template uses a main theme for the view content and an additional theme (color swatch) for the navigation menu. To switch to another theme, open the src\themes\metadata.base.json or src\themes\metadata.additional.json file and assign a theme name to the baseTheme field:

{
    // ...
    "baseTheme": "material.blue.light",
    // ...
}

You can find all theme names in the Predefined Themes help topic.

Run the following command to rebuild themes:

npm run build-themes

You can use the DevExtreme ThemeBuilder to create custom themes based on predefined themes. Follow the steps below:

1. Import src\themes\metadata.base.json or src\themes\metadata.additional.json to the ThemeBuilder.

2. Customize the theme.

3. Export theme metadata to the initial file (see Postpone Customization).

Run the following command to rebuild themes:

npm run build-themes

Color swatches are secondary color schemes used alongside a primary color scheme.

In the DevExtreme Vue Template, a color swatch is applied to the navigation menu and is configured in the src\themes\metadata.additional.json file. To apply this color swatch to an element, add the dx-swatch-additional class to this element:

<div class="dx-swatch-additional">
    <!-- Your content here -->
</div>

Theme variables are defined in the src\themes\generated\variables.base.scss and src\themes\generated\variables.additional.scss files. Apply them to custom elements, so that the elements have a uniform appearance with the rest of the application.

The following code applies the $base-accent variable as the background-color of my-element:

// Your SCSS file
@import "../../../themes/generated/variables.base.scss";

#my-element {
    background-color: $base-accent;
}

To generate an application without views and a navigation menu, use the --empty flag:

npx devextreme-cli new vue-app app-name --empty