Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DevExtreme Application Template & CLI Tools for Vue #7699

nightskylark opened this issue Apr 12, 2019 · 0 comments


None yet
1 participant
Copy link

commented Apr 12, 2019

The Problem

It can be complex and time-consuming to create a web application that has a responsive layout, navigation, and uniform style.

The Proposed Solution

The new Vue Application Template is a simple application with a navigation menu and several sample views in a responsive layout.

You can download this application from GitHub or use DevExtreme CLI commands to create and modify it.

DevExtreme Vue Application Template



The application template supports three adaptive layouts that arrange elements in the following way:

  • side-nav-inner-toolbar
    The toolbar's width is equal to the page's width. The Drawer component is under the toolbar.

  • side-nav-outer-toolbar
    The Drawer's height equals the page's height. The Drawer component wraps the toolbar.

  • single-card
    The page consists of a single adaptive card element. You can see this layout on the Log In form.


We created the media-query utility that defines how the application adapts to different screen sizes. You can change the screen size qualifiers (see the Breakpoints object) to change this behavior.

Navigation & Routing

We implemented the navigation menu based on the DevExtreme TreeView component and used the vue-router library for routing.

To modify navigation and routing items, you can use DevExtreme CLI commands (see Add a View section).


The Vue Application Template uses two DevExtreme themes: as a base theme and as an additional theme.

To modify these themes, change their metadata in the metadata.base.json and metadata.additional.json files in the src/themes/ folder. For a more profound customization, change the metadata in the DevExtreme ThemeBuilder.

To apply changes, run the following command:

> npm run build-themes

This command uses the metadata to generate .css files that stylize DevExtreme components and .scss variables that can be used to stylize custom components.

DevExtreme CLI Tools

Add DevExtreme to a Vue Application

The following command installs the devextreme and devextreme-vue dependencies and references DevExtreme stylesheets:

> devextreme add devextreme-vue

Create a New DevExtreme Vue Application

> devextreme new vue-app app-name [--layout][--empty]

If you do not specify the parameters, CLI dialogs prompts you to specify them.

Add a View

The following command generates an empty view and adds it to the navigation menu and routing:

> devextreme add view view-name [--icon]

Try It

Live Sandbox

Check out the early working prototype


> npm i -g devextreme-cli@next

We Need Your Feedback

Take a Quick Poll

Does the new Vue Application Template meet your needs?

Get Notified of Updates

Subscribe to this thread or to our Facebook and Twitter accounts for updates on this topic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.