foundation / foundation-sites

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.
https://get.foundation
MIT License
29.65k stars 5.49k forks source link

How to use new ES6 modules for Responsive Accordion Tabs in 6.4 #10191

Closed aaronjpitts closed 7 years ago

aaronjpitts commented 7 years ago

I'm using 6.4rc-3 to work on a Vue integration with webpack, it's working well. For a tabs component I have made, I use the below in Vue.js which works fine:

<script>
import { Foundation } from '../../node_modules/foundation-sites/js/foundation.core';
import { Tabs } from '../../node_modules/foundation-sites/js/foundation.tabs';

Foundation.plugin(Tabs, 'Tabs');
export default {
  name: 'Tabs',
  props: {
    dataResponsiveAccordionTabs: {
      required: false,
      type: String,
    },
    options: {
      required: false,
      type: Object,
    },
  },
  created() {
    this.componentId = `accordion-${this._uid}`;
  },
  mounted() {
    this.$nextTick(() => {
      this.tabs = new Foundation.Tabs($(`#${this.componentId}`), this.options);
    });
  },
  destroyed() {
    this.tabs.destroy();
  },
};
</script>

My question is how could I get this component to work with Responsive Accordion Tabs? As I see I would need to import foundation.responsiveAccordionTabs.js and foundation.accordion.js? How can I import them to work with the Foundation.plugin method?

Many thanks

aaronjpitts commented 7 years ago

Ok so basically I only have to include foundation.core.js and foundation.responsiveAccordionTabs.js as foundation.responsiveAccordionTabs.js includes the necessary foundation.tabs.js and foundation.accordion.js but unfortunately this plugin just does not work at all.

kball commented 7 years ago

@aaronjpitts can you explain a little more what does not work and/or provide a codepen or git repo demonstrating? Would very much like to track this down pre-release

aaronjpitts commented 7 years ago

10207 fixes this