MDB jQuery
MDB Angular
MDB React

MDB Vue - Frequently Asked Questions

Click below for responses to frequently asked questions.

There are several ways to do it:

  1. Vue CLI plugin - simply run vue add mdb in your console in your Vue project directory and follow the instructions

  2. MDB ZIP file - you can download the zip package and include simply modify it to your needs, as it already includes the required routing and components presentation.

  3. NPM - you can install it using npm as a module (if will be installed under the node_modules folder).

You can find the installation steps for both options here.

Sure there is! You will need an account at our git server (if as a PRO user you don't have one, please contact us via contact@mdbootstrap.com). Once you have access, simply follow our 5 min quick start.

It is fairly simple. If you are using yarn, just replace npm install with yarn add:

1. First, install Vue, if you have not already.

npm install --global vue-cli
              vue init webpack <YOUR-PROJECT-NAME-HERE>
              cd <YOUR-PROJECT-NAME-HERE>
              npm install
              npm run dev 

2. Create your Heroku app

heroku create <YOUR-PROJECT-NAME-HERE>
Now, an URL to your project should be created (say, https://<YOUR-PROJECT-NAME-HERE>.herokuapp.com. To ensure that the service does not install any unnecessary dependencies, toggle the NODE_ENV to production:
heroku config:set NODE_ENV=production --app <YOUR-PROJECT-NAME-HERE>

3. Create a server.js: download Express.js:

npm install express --save
...and add a server.js file to project's root directory:
// server.js
              var express = require('express');
              var path = require('path');
              var serveStatic = require('serve-static');
              app = express();
              app.use(serveStatic(__dirname + "/dist"));
              var port = process.env.PORT || 5000;
              app.listen(port);
              console.log('server started '+ port);
The app will be served from the /dist directory, which gets populated after build process is finished:
npm run build
To see how things stand, type:
node server.js
You should see your project being served at http://localhost:5000. Heroku starts the apps using the start script in project's package.json, so be sure to replace the original one with server.js:
// package.json
                {
                  "name": "<YOUR-PROJECT-NAME-HERE>",
                  "version": "1.0.0",
                  "description": "A Vue.js project",
                  "author": "",
                  "private": true,
                  "scripts": {
                    "dev": "node build/dev-server.js",
                    "build": "node build/build.js",
                    "start": "node server.js",   <--- EDIT THIS LINE HERE
                ...

4. Create a git repository and set Heroku as its remote:

git init
heroku git:remote --app <YOUR-PROJECT-NAME-HERE>
Remove the /dist directory from your .gitignore file and commit the changes:
git add . && git commit -a -m "Adding files."

5. Push it and hack on!

git push heroku master

Now, your project should be available at https://<YOUR-PROJECT-NAME-HERE>.herokuapp.com. Create, tweak, commit and have fun! In case of deployment issues, please be sure to check the platform's CLI command:

heroku logs

We are constantly working on improvements on that matter - we have already created Nuxt.js installation module Laravel preset to add MDB to your SSR project quickly - you can find an instruction here

In some cases to get things done you need to install bebel-preset-stage-2 through npm.
If this does not help, please contact us on support and describe your problem as accurately as possible.

Once you buy MDB product e.g. MDB 6 Pro, all updates for this product, along with Premium Support are free for a year. After this period your license is still valid and you can build projects with the most recent version of MDB in your account. Nevertheless, if you'd like to use Premium Support and the features from later updates you'd have to extend your license.


Couldn't find an answer to your question? Please visit the support forum or contact us.