Skip to content

Commit

Permalink
Add configuration section (#119)
Browse files Browse the repository at this point in the history
  • Loading branch information
lukyanovas committed Jul 9, 2018
1 parent 1e53f25 commit 0bb1b2b
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 0 deletions.
6 changes: 6 additions & 0 deletions README.md
Expand Up @@ -39,6 +39,12 @@ Install the **devextreme** and **devextreme-vue** npm packages:
```console
npm install --save devextreme@18.1 devextreme-vue
```
#### <a name="additional-configuration"></a>Additional Configuration ####

The further configuration steps depend on which build tool, bundler or module loader you are using. Please choose the one you need:

* [Configuring Webpack](https://github.com/DevExpress/devextreme-vue/blob/master/docs/using-webpack.md)
* [Configuring Vue CLI](https://github.com/DevExpress/devextreme-vue/blob/master/docs/using-vue-cli.md)

### <a name="import_devextreme_modules"></a>Import DevExtreme Modules and Themes ###

Expand Down
9 changes: 9 additions & 0 deletions docs/using-vue-cli.md
@@ -0,0 +1,9 @@
# Using the DevExtreme Vue Components with Vue CLI

## Create a new Application ##

Use [Vue CLI](https://cli.vuejs.org/) to create a new project.

## Add DevExtreme ##

Follow the [installation](https://github.com/DevExpress/devextreme-vue#installation) section in our Readme.
41 changes: 41 additions & 0 deletions docs/using-webpack.md
@@ -0,0 +1,41 @@
# Using the DevExtreme Vue Integration with Webpack

## Create a new Application ##

You can use [the original Vue template on Webpack](https://github.com/vuejs-templates/webpack) or some other starter to create a new project based on Webpack.

## Add DevExtreme ##

Follow the [installation](https://github.com/DevExpress/devextreme-vue#installation) section in our Readme.

## <a name="configuration"></a>Configure Webpack Loaders for DevExtreme Stylesheets ##

If you are using [the original Vue template on Webpack](https://github.com/vuejs-templates/webpack)
you don't need any extra configuration, since all the required loaders are configured out-of-the-box.
Otherwise, you need to make sure that all the necessary extensions are processed by the corresponding
[loaders](https://webpack.github.io/docs/loaders.html) as described below.

Go to *webpack.config.js* and configure loaders for css and fonts as follows:

```js
...
loaders: [
...
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.(ttf|eot|woff)$/, loader: "file-loader?name=/[name].[ext]" }
]
...
```

Also, make sure that *style-loader*, *css-loader* and *file-loader* are installed into your project as npm dev dependencies.

## Import DevExtreme Stylesheets ##

Having loaders configured, you need to import the required [DevExtreme css files](https://js.devexpress.com/Documentation/Guide/Themes/Predefined_Themes/).
Go to your main .js file and import the stylesheets as follows:

```js
...
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
```

0 comments on commit 0bb1b2b

Please sign in to comment.