Using JavaScript utilities and plugins from Foundation

Foundation comes with many useful JavaScript utilities, such as MediaQuery. This MediaQuery utility can be used to get the screen size breakpoints (small, medium, large, extra-large) for creating responsive layouts in your app. Let's find out how you can make use of it in the following steps:

1. Create a utils.js file for keeping your custom global utilities in the /plugins/ directory and add the following code:

// plugins/utils.js
import Vue from 'vue'
Vue.prototype.$getCurrentScreenSize = () => {
  window.addEventListener('resize', () => {
    console.log('Current screen size: ' +
     Foundation.MediaQuery.current)
  })
}

In this code, we have created a global plugin (which is a JavaScript function) that will get the current screen size from the current property in the MediaQuery utility and log the output whenever the browser's screen size is changed. A resize...