Foundation 6.4

[aaronjpitts]

Great plugin! Do you have any idea when/if you will update to use foundation 6.4 which is now rc3 and supports ES6 modules? Will using 6.4 still require to use the mounted and destroyed hooks in each component?

Many thanks

[hal0gen]

Thanks! I started looking at the release candidate of 6.4 last weekend... Honestly, I was thinking about creating a Vue Plugin (see #18), which could have Foundation as a dependency and could be distributed as a npm module. Anywyay, there is a lot to figure out, I'll push something on a branch of this project as soon as I got a couple of components working.

[hal0gen]

I got a couple of hours to play around, and managed to get a working Tooltip component: https://gist.github.com/hal0gen/06504ded380abdff761d6c411511d2a9
I tried with Tabs next but that seems much harder, because there are two DOM elements involved (actual tabs and tabs content). Also, if we want to aim for a component library, imports should be definitely improved.

[sn0rcha]

Hey Guys,

I've been working with 6.4 today - you can use the modules like below, I use a file called "Foundation.js" in my plugin directory of my Vue.js site. I grabbed the base from the official Foundation 6.4 release candidate thread. Below is just the drop down modules but you can do this for all modules:

import {Foundation} from '../../node_modules/foundation-sites/js/foundation.core';
import {Dropdown} from '../../node_modules/foundation-sites/js/foundation.dropdown';
import {DropdownMenu} from '../../node_modules/foundation-sites/js/foundation.dropdownMenu';

Foundation.plugin(Dropdown, 'Dropdown');
Foundation.plugin(DropdownMenu, 'DropdownMenu');

const FoundationDirectives = {
  install(Vue) {
    Vue.directive('f-dropdown', {
      inserted(el) {
        // eslint-disable-next-line
        el.fDropdown = new Foundation.Dropdown(window.$(el));
      },
      unbind(el) {
        el.fDropdown.destroy();
      },
    });

    Vue.directive('f-dropdown-menu', {
      inserted(el) {
        // eslint-disable-next-line
        el.fDropdown = new Foundation.DropdownMenu(window.$(el));
      },
      unbind(el) {
        el.fDropdown.destroy();
      },
    });
  },
};

export default FoundationDirectives;

Then import that into main.js and Vue.use(YourImportedName).

The only thing I'm having issues with is when building to production it's throwing an error:

ERROR in static/js/vendor.ae3d9d155aac6bd53995.js from UglifyJs
Unexpected character '`' [./~/foundation-sites/js/foundation.util.core.js:24,0][static/js/vendor.ae3d9d155aac6bd53995.js:32261,124]

Can the owner of this repo have a look, I think it's cause the Babel-loader is not doing something it should but I've tried a few things and got no where.

Cheers,
Ben

[aaronjpitts]

I've actually now been working on a new Vue Foundation integration which is working very well with 6.4. I'll release it this week :)

[sn0rcha]

awesome! have you seen the error that i'm getting above before?

[aaronjpitts]

Add this below your imports:

Foundation.plugin(Dropdown, 'Dropdown');
Foundation.plugin(DropdownMenu, 'DropdownMenu');

[aaronjpitts]

but I'm not sure if that will fix your error, not seen it.

[sn0rcha]

Sorry i meant to include that in the post above as I have that in my code. It's a strange error can't seem to fix it, only does it when trying to build production.

[masterylabs]

Great work! Foundation 6.4 default is flex-grid, but does not seem to be loading flex?

[sn0rcha]

For anyone who stumbles across this, I fixed the build to production error by including the foundation-sites/js directory in the babel-loader includes section.

[IamManchanda]

@hal0gen Any updates buddy??

{ PS: We are releasing 6.4.2 soon... most probably early next week }

[grantcarthew]

To anyone watching this, I'm working on the upgrade this week.

[grantcarthew]

Upgrade completed. Clone the master and try it out.
I expect there will be a few issues.

[grantcarthew]

To anyone following this thread, I just migrated the foundation import from a heavy single file import to a modular import.

See this file for details: https://github.com/vue-foundation/vue-foundation/blob/master/src/foundation.js

The main.js file has also been cleaned up.

[grantcarthew]

A little back-story. I was working on my personal project and wanted to try out Abide, the foundation form validation javascript plugin. That is what got me into wondering how to split up the JS from a single import of foundation.js to a pick and choose model. That is what's great about this template project. Easy to play with foundation in a sterile environment.

As you can see I got it working however, it was far from an ideal import process. My ideal would be to simply import the foundation.core.js file and then any plugins you want.

I opened an issue in the foundation-sites repository and they great guys there are going to have a look at it. Here is a reference to the issue: foundation/foundation-sites#10682

Looks like a conversion to TypeScript and v7.0 will make things a little easier.

PS: Abide has bugs when you try to destroy the object in the beforeDestory hook. I gave up on it and rolled my own form validation.