nuxt.js + bootstrap

[PavelPolyakov]

Hi,

I've tried to include http://getbootstrap.com/ to my project using this:

npm i bootstrap
npm i jquery
# besides, I've installed them via bower to have the css available

here is my nuxt.config.js:

module.exports = {
  build: {
    vendor: ['jquery', 'bootstrap']
  },
  /*
  ** Headers of the page
  */
  head: {
    title: 'starter',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', content: "Nuxt.js project" }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }
    ]
  },
  /*
  ** Global CSS
  */
  css: ['~assets/css/main.css', '~assets/bower_components/bootstrap/dist/css/bootstrap.css', '~assets/bower_components/bootstrap/dist/css/bootstrap-theme.css'],
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#3B8070' }
}

Here is the result:

Could anyone help, how can I connect it more correctly? Is that possible to somehow state to the webpack that jquery should be connected before the bootstrap ?

Regards,

_{This question is available on Nuxt.js community (#c150)}

[yyss8]

you can simply add bootstrap and jquery into head to have them working
like:

    head:{
        script:[
            {src:'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'},
            {src:'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'}
        ]
    }

here's solution that I found online about adding them into webpack

To add the jQuery plugin, edit plugins: []

new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery',
    jquery: 'jquery'
})

or add them into loader to expose them globally by using expose-loader
like:

   {test: require.resolve('jquery'), loader: 'expose?$'}

but no luck for me, so I'm still sticking with the head scripts way

[PavelPolyakov]

@yyss8
I was able to do like so:

build: {
        vendor: ['axios', '~assets/bower_components/jquery/dist/jquery.js', '~assets/bower_components/bootstrap/dist/js/bootstrap.js']
    },

but I would rather prefer to include them by the shortnames.

Thank you for your suggestion.

[Atinux]

@PavelPolyakov you can install boostrap and jquery via npm as well if you want to use the shortnames:

1. bootstrap: https://www.npmjs.com/package/bootstrap
2. jquery: https://www.npmjs.com/package/jquery

[PavelPolyakov]

@Atinux
thanks for the response, however as I mentioned in the first message - I did it through the npm and it leads to the errors on the front-end.

That's why I've created an issue, as I think we're missing some configuration option to state that bootstrap depends on the jquery.

[Atinux]

I will take a look at it @PavelPolyakov

[Atinux]

I found how to use bootstrap with nuxt.js.

nuxt.config.js

const webpack = require('webpack')

module.exports = {
  build: {
    vendor: ['jquery', 'bootstrap'],
    plugins: [
      // set shortcuts as global for bootstrap
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
  },
  // include bootstrap css
  css: ['bootstrap/dist/css/bootstrap.css'],
  // include bootstrap js on startup
  plugins: ['~plugins/bootstrap.js']
}

plugins/bootstrap.js

// Include bootstrap JS only 
if (process.BROWSER_BUILD) {
  require('bootstrap')
}

Then in your pages components, you can use bootstrap:

pages/index.vue

<template>
  <div>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
      <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
      <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
      <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="home">Home text...</div>
      <div role="tabpanel" class="tab-pane" id="profile">Profile text...</div>
      <div role="tabpanel" class="tab-pane" id="messages">Messages text...</div>
      <div role="tabpanel" class="tab-pane" id="settings">Settings text...</div>
    </div>
  </div>
</template>

Voila 😄

[PavelPolyakov]

Thanks @Atinux ,

So this what I was missing:

 plugins: [
      // set shortcuts as global for bootstrap
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ]

Thank you very much!

[Cengkaruk]

Hi @Atinux ,

I'm using another UI library (UIkit) for this, work using ProvidePlugin but need more handling. They suggest to use as an external library in webpack. How to do it in nuxt? Thanks.

[Atinux]

@Cengkaruk you don't need to use uikit from npm, you can do this in your nuxt.config.js:

module.exports = {
  head: {
    link: [
      { href: 'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.9/css/uikit.min.css', rel: 'stylesheet' }
    ],
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', type: 'text/javascript' },
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.9/js/uikit.js', type: 'text/javascript' }
    ]
  }
}

And then in your page components your can use directly their components:

<template>
  <div>
    <span class="uk-badge">1</span>
    <div uk-alert>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  </div>
</template>

[Cengkaruk]

Working! But they have custom attribute, something like this and the attribute not working after we navigate to another page using nuxt-link. Btw i'm not using that attribute right now.

[Atinux]

I just tried and it works fine @Cengkaruk

[Cengkaruk]

Really? Okay, i will find out what are missing. Thank you @Atinux

[dev-ahmad]

@Atinux Hey Sebastien , i am deploying Nuxt.js App to Heroku and i get this Error :

ERROR in ./.nuxt/index.js
remote: Module not found: Error: Can't resolve 'nuxt_plugin_uikit_47fa8f2a' in '/tmp/build_31cd53bb03d3c4965aefafd39b60d23b/.nuxt'
remote: @ ./.nuxt/index.js 225:0-68
remote: @ ./.nuxt/client.js

.....
idk what's that ! everything in local was perfect !! , and i used Uikit from nuxt.config.js ,, is there anything to do with this error !

Regards ..

[tetreault]

the way @Atinux suggested isn't working for me when i try and import bootstrap css that way

[filippolcr]

@Atinux Ciao Sebastien,

For me, if (process.BROWSER_BUILD) { require('bootstrap') }

process.BROWSER_BUILD is undefined.

Could be replaced with process.browser?

Have you seen this #2710 ? What do you think about?

I note this in terminal:

{ statusCode: 404, path: '/bootstrap.css.map', message: 'This page could not be found' }

Thanks

[Atinux]

@filippolcr you should use process.browser, BROWSER_BUILD has been deprecated

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.