Nuxt.js: AdminLTE 2 (Bootstrap 3) theme and <nuxt-link> issue

[wett1988]

I have a issue with nuxt-link on static nuxt app.

I want to use AdminLTE theme. It based on bootstrap 3.
When i use 'nuxt dev' - nodejs server routes - all works fine, but when a use static app routes - bootsrap dropdowns not works

GIF for illustrate what
http://g.recordit.co/ipCTDDvMQi.gif

If page force reload in browser - dropdown became works again

It is issue or i doing somebody wrong?

_{This bug report is available on Nuxt.js community (#c358)}

[ausir0726]

It possible because your dropdown replace a new element by vue ( dropdown not in layout )
but you don't rebind click event ( template usually bind event on app.js )
I think if you keep the same dropdown element at layout , and without change layout
that should be working , but I suggest rewrite bootstrap-vue that will be better.

I just add jquery and bootstrap in nuxt.config.js

head: {
    ....
    script: [
      { src: 'https://code.jquery.com/jquery-3.1.1.slim.min.js' },
      { src: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js' }
    ],
  },

and write dropdown in layouts/default.vue

[wett1988]

@ausir0726 yes, this works because it run on 'nuxt dev' server. - it works for me to.

I'm talking about the case when used 'nuxt generate' - static version of nuxt app.

I try to move my head from default.vue to nuxt.config.js like you write

head: {
{ rel: 'stylesheet', href: '/AdminLTE/bootstrap/css/bootstrap.min.css' }, 
{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css' }, 
{ rel: 'stylesheet', href: '/AdminLTE/dist/css/skins/skin-blue.min.css' }, 
  ],

  script: [
  { type: 'text/javascript', src: '/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js', body: true},
  { type: 'text/javascript', src: '/AdminLTE/bootstrap/js/bootstrap.min.js', body: true},
  { type: 'text/javascript', src: '/AdminLTE/dist/js/app.min.js', body: true}

  ]

... nothing has changed

write dropdown in layouts/default.vue

My dropdowns placed in layouts/default.vue

I suggest rewrite bootstrap-vue that will be better.

Theme support only Bootstrap 3

[ausir0726]

umm...

but I tried generate works for me .
http://stupid-egg.surge.sh/

anyway ,
I wiil try to find some information for help ..
if you can upload your project code to github , that will be easier for test ..

[wett1988]

@ausir0726 Thank you! I am very grateful for your help!

I created a repository with minimal AdminLTE template

https://github.com/wett1988/tmp_adminlte_nuxtjs

the problem still remained

[ausir0726]

hi , I found what's your problem .

that because you write type: 'text/javascript' attribute , so it broken after you change route .

first time you really loaded bootstrap.js and bind dropdown event.
but , when you change the route , vue-meta change something in head tag
origin script bootstrap is remove and bind a new one ...
so , your dropdown already bind the function in origin bootstrap.js
now , it's gone ...... so ,,
every time you click dropdown , the aria-expanded always give you false

if you remove type: 'text/javascript' , dropdown will be work ok when you change route .
in generage source code it don't have type: 'text/javascript' when you change route , vue-meta create a new script ( have text/javascript ) and replace it .

finally , I will suggest you remove the bootstrap.min.js and find the source code ,
rewrite the vue component version will be best .

[ausir0726]

@alexchopin
I think is an another html-minifier issue with nuxt.js
because , when generate will html minify , it default will remove type='text/javascript' tag
so vue-meta replace a new script when change route ...

[wett1988]

that because you write type: 'text/javascript' attribute , so it broken after you change route .

@ausir0726 Yes! It works! Thank you so much! I would never have guessed that the problems in this strange behavior :)

finally , I will suggest you remove the bootstrap.min.js and find the source code

You talk about move to use bootstrap-vue?

I think this can cause unexpected bugs already inside AdminLTE - in the documentation they wrote Bootstrap 3. On the other hand it drives to a dependency on bootstrap-vue - reduces flexibility. I'm a beginner developer and I seem to find a description of the problem for the old bootstrap.js easier than the new bootstrap-vue

[ausir0726]

@wett1988 It seen like html minify issue .
I think that will soon be fix .
you should keep the title have bootstrap , change route , nuxt-link .......
that will be easier for other people search :D
I guess no one can understand the vue-meta problem when they have problem .
and this maybe html minify issue 👍

[wett1988]

@ausir0726

It seen like html minify issue. I think that will soon be fix .

Well if the issue is simple and we have helped developers in their large case :)

you should keep the title have bootstrap , change route , nuxt-link ....... that will be easier for other people search :D

I thought that developers so it will be easier to understand that the problem is not that someone wrote wrong code, and product has real issue

Ok, i will return old title :)

[Atinux]

I will be fixed in the upcoming release and the html-minifier options will be customisable via nuxt.config.js 👍

Thank you @ausir0726 for helping!

[Atinux]

The 0.10 release it out ✋

[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.