Skip to content

Export individual components #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 18, 2016
Merged

Export individual components #26

merged 1 commit into from
Nov 18, 2016

Conversation

nddery
Copy link
Contributor

@nddery nddery commented Nov 18, 2016

This would allow us to import individual components instead of "using" the plugin on the main Vue instance.

So, in addition of being able to use the whole plugin like before:

// index.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use('BootstrapVue')

We could also instead import and use components individually.

// components/Hello.vue
<template>
  <b-button-group vertical>
    <b-button>Left</b-button>
    <b-button>Middle</b-button>
    <b-button>Right</b-button>
  </b-button-group>
</template>

<script>
import { bButtonGroup, bButton } from 'bootstrap-vue'

export default {
  components: {
    bButtonGroup,
    bButton
  }
}
</script>

@pi0
Copy link
Member

pi0 commented Nov 18, 2016

@nddery Thanks :)

@pi0 pi0 merged commit c21977e into bootstrap-vue:master Nov 18, 2016
@nddery
Copy link
Contributor Author

nddery commented Nov 18, 2016

@pi0 any idea when we could expect an update to npm ?

@sourcec0de
Copy link

sourcec0de commented Nov 19, 2016

@nddery @pi0

This implementation breaks the current API and results in Uncaught TypeError: plugin.apply is not a function(…)

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue);

To make it work users will have to call it like this now.

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue.default);

at least this was the case for me in a browserify environment.

@pi0
Copy link
Member

pi0 commented Nov 19, 2016

@sourcec0de @nddery would you please check 94794f1 (v0.3.8) it may possibly fix both issues.

@sourcec0de
Copy link

sourcec0de commented Nov 19, 2016

@pi0 thats essentially the same thing as before.

The only way this will work as expected is if you are exporting using this syntax.

export {bBtn, bTabs};
export default plugin;

This will create named exports for the individual components.
With the addition of a fallback export for the plugin.

Then when they are imported it would look something like this.

import { bBtn } from 'bootstrap-vue'; // this will pull named export
import BootstrapVue from 'bootstrap-vue'; // this will pull default export

@pi0
Copy link
Member

pi0 commented Nov 19, 2016

@sourcec0de Would you please make a PR?

@sourcec0de
Copy link

sourcec0de commented Nov 19, 2016

@pi0 yea, I'm headed to bed for this evening but I'll submit one tomorrow morning.

~ Thanks for the hard work btw. Great job so far.

@sourcec0de
Copy link

@pi0 @nddery created a pull request that implements what I mentioned above

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants