Integrating mdbootstrap in my NuxtJS project

Topic: Integrating mdbootstrap in my NuxtJS project

Raluca free asked 6 years ago

I was trying to integrate mdbootstrap in my NuxtJS project but I failed to find any indication on how to do so. Does it even support SSR projects? If so, I guess I need to include it in my nuxt.config.js file. Can you please provide an example? Thank you in advance for your time!

Add comment

Istiake Ahamed Novel free answered 4 years ago

0 0 Best answer

*_Using CDN_

<blockquote>
 Update the nuxt.config.js head section with the following code:
</blockquote>

<pre class="prettyprint"><code>head: {
title: process.env.npm_package_name || "",
meta: [
 {
 charset: "utf-8"
 }, {
 name: "viewport",
 content: "width=device-width, initial-scale=1"
 }, {
 hid: "description",
 name: "description",
 content: process.env.npm_package_description || ""
 }
],
link: [
 {
 rel: "icon",
 type: "image/x-icon",
 href: "/favicon.ico"
 }, {
 rel: "stylesheet",
 href: "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
 }
],
script: [
 {
 src: "https://code.jquery.com/jquery-3.4.1.slim.min.js",
 type: "text/javascript"
 }, {
 src: "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js",
 type: "text/javascript"
 }, {
 src: "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js",
 type: "text/javascript"
 }
]
</code></pre>

},

Or you can see this link <a href="http://istiake.com/blog/how-to-use-jquery-in-nuxtjs/" target="_blank" rel="nofollow">http://istiake.com/blog/how-to-use-jquery-in-nuxtjs/</a>

Please insert min. 20 characters.

*_Using CDN_

Update the nuxt.config.js head section with the following code:

head: {
title: process.env.npm_package_name || "",
meta: [
  {
    charset: "utf-8"
  }, {
    name: "viewport",
    content: "width=device-width, initial-scale=1"
  }, {
    hid: "description",
    name: "description",
    content: process.env.npm_package_description || ""
  }
],
link: [
  {
    rel: "icon",
    type: "image/x-icon",
    href: "/favicon.ico"
  }, {
    rel: "stylesheet",
    href: "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
  }
],
script: [
  {
    src: "https://code.jquery.com/jquery-3.4.1.slim.min.js",
    type: "text/javascript"
  }, {
    src: "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js",
    type: "text/javascript"
  }, {
    src: "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js",
    type: "text/javascript"
  }
]

Or you can see this link http://istiake.com/blog/how-to-use-jquery-in-nuxtjs/

Mikołaj Smoleński staff commented 4 years ago

Almost all scripts (without jQuery) are included in mdbvue module.

You can find installation guide here: https://mdbootstrap.com/docs/vue/getting-started/quick-start/#nuxt

Best regards

Add comment

Jakub Strebeyko staff answered 5 years ago

2 0 Best answer

Good news, everyone!

https://mdbootstrap.com/articles/vue/mdb-vue-nuxt-js-quick-start-guide/

thomas@rainmaker.travel free commented 5 years ago

The problem with this guide is that it covers only MDB Vue.

The pro version makes use of a very outdated 'vue-perfect-scrollbar' in pro/Scrollbar.vue which is not supported by SSR.

As a result you will receive a 'window is not defined' error until things are changed.

Mikołaj Smoleński staff commented 5 years ago

Thanks for reporting the issue. We'll try to fix it as soon as possible.

Best regards

Add comment

Jakub Mandra staff answered 5 years ago

2 0 Best answer

We do not specialize in Nuxt as it is not a part of our environment, yet this might help: https://nuxtjs.org/api/components-no-ssr/

Add comment

ruudboon pro answered 5 years ago

1 0 Best answer

Same question here. I assume it should be possible to just add it to Nuxtjs without ssr but not sure how to do that in Nuxt.

Add comment

degfra free answered 5 years ago

1 0 Best answer

Please insert min. 20 characters.

Hi, I know that MDBVue is nor compatible with Nuxt at this moment. My questions are: 1. What exactly makes it incompatible with Nuxtjs (in a nutshell) ? 2. Do you have any plans to make it compatible in the near future? Or not at all? 3. If I do not use Nuxt, but simply Vue.js : is it a reasonable plan to design the UI with MDBJQuery in Pinegrow (Web Editor, based on JQuery), and then use the resulting CSS properties (layout etc.) to derive the MDBVue components in the Vue.js app (configuring the necessary data() properties etc,)?

Mikołaj Smoleński staff commented 5 years ago

For this moment we focus on the most important cases and tasks which in order to prepare all MDB jQuery components in MDB Vue package. Then we will be testing it with environment like Nuxt. I can't tell what is the ETA, but we have this issue in our memory. Best Regards

Add comment

Mikołaj Smoleński staff answered 6 years ago