navbar doesn't work

[miquels]

In #5 I reported that navbar doesn't work. That issue was closed as (apparently, sorry about that) I was working with a fork called vue2-bootstrap4.

But using bootstrap-vue instead of vue2-bootstrap4 I have the exact same problem.

vue.js?3de6:2611 [Vue warn]: Failed to mount component: template or render function not defined. 
(found in component <bNav>)

This is my code. Note that this:

import {setup} from 'bootstrap-vue';
setup(Vue);

gives an error:

main.js?3479:7 Uncaught TypeError: (0 , _bootstrapVue.setup) is not a function

so I changed it to the Vue.use() code below. Now it works for things like button-group, but navbar fails.

src/main.js:

import Vue from 'vue'
import App from './App'

import 'bootstrap/dist/css/bootstrap.min.css'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

src/App.vue:

<template>
<div id="#app">
<b-navbar fixed="top" type="light" variant="default" full>
  <a class="navbar-brand" href="#">Navbar</a>
  <b-nav type="navbar" class="pull-xs-left">
    <b-nav-item link="#" active>Home <span class="sr-only">(current)</span></b-nav-item>
    <b-nav-item link="#">Features</b-nav-item>
    <b-nav-item link="#">Pricing</b-nav-item>
    <b-nav-item link="#">About</b-nav-item>
  </b-nav>
  <form class="form-inline navbar-form pull-xs-right">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-success-outline" type="submit">Search</button>
  </form>
</b-navbar>
</div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
</style>

Mike.

[pi0]

@miquels Thanks for Report! Vue.js 2 default builds don't support 'template' rendering any more :)
I forgot about some internal components, including navItem ... i'll fix that soon :)

About your first problem, i could not reproduce that error! (default dist file, exportes setup on module.exports ..)

[pi0]

Meanwhile problem is resolved, you can either:

Adding this to webpack resolver config:

resolve: {
    alias: {vue: 'vue/dist/vue.js'}
},

Or

`import Vue from 'vue/dist/vue'``

See Here for more details

[miquels]

I found the 'setup' problem. This:

import {setup} from 'bootstrap-vue';
setup(Vue);

doesn't work because you export 'setup' directly, not 'something.setup'. The fix is to not do destructuring:

import setup from 'bootstrap-vue'
setup(Vue)

[miquels]

However, the original issue is still not resolved. vue-cli asks during setup of the project if you want the full version or the runtime-only version, and I already chose the full version. My build/webpack.base.conf.js has

  resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'vue$': 'vue/dist/vue',
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components')
    }
  },

Using import Vue from 'vue/dist/vue' doesn't change anything, and changing alias: { 'vue$': 'vue/dist/vue' } to alias: { 'vue': 'vue/dist/vue.js' } doesn't either.

I looked into the vuejs source, to see where " Failed to mount component: template or render function not defined." comes from. It's in src/core/instance/lifecycle.js::lifecycleMixin(), and it does something like

if ( test ) {
    warn('You are using the runtime-only build of Vue')
} else {
   warn('Failed to mount component: template or render function not defined')
}

so in fact the reason that I see the error "Failed to mount component: template or render function not defined" is an indicator that I am, in fact, using the full version, not the runtime-only build.

BTW,

    "vue": "^2.0.1"
    "bootstrap": "^4.0.0-alpha.5",
    "bootstrap-vue": "0.0.4",
    "vue-loader": "^9.4.0",
    "vue-style-loader": "^1.0.0",
    "vue2-bootstrap4": "0.0.2",
    "webpack": "^1.13.2",

Mike.

[pi0]

@miquels sorry I was a little busy .. Everything is fixed on 0.1 release :

• No more <tepmlate> tags.. everything is now compiled in pure vue
• Styles published (so you can import it from dist/style.css)
• Docs and Demo Page Updated (WIP)