@luaguillande/screen-checker v1.2.5

Screen Checker

Vue Plugin to help you to identify the size of the screen without complexity.

Quick start guide

1. Add the plugin to your project

  npm i @luaguillande/screen-checker

Option 1: If you are using Nuxt.js you can import a plugin to inject the property $sc to your Vue instances.

  plugins: [
      { src: '~/node_modules/@luaguillande/screen-checker/checkScreenPlugin.js'}
  ]

Option 2: Import as Mixin

If you are not using a Nuxt environment or if you want to import individually into components use the Mixin.

  <scprit>
  import checkScreenMixin from '@luaguillande/screen-checker/checkScreenMixin.js'

  export default {
       mixins:[checkScreenMixin]
  }
  </scprit>

or

  <scprit>
  import checkScreenMixin from '@luaguillande/screen-checker/checkScreenMixin.js'

  Vue.mixins(checkScreenMixin)
  </scprit>

Use in html.

<div :class="{ 'some-class': $sc.desktopAndUp,  'another-class': $sc.tabletAndDown}">

<button :v-html="$sc.largeTabletAndDown ? 'Click here' : 'Click here to send me a text' "></button>

<img :src="my logo" v-if="$sc.isLargeDesktop"/>
<div v-else>My Logo Text </div>

Use in js.

<script>
export default{
  methods:{
    myFn(value){
      return this.$sc.largeTabletAndDown ? value : 'Not mobile'
    }
  }
}
<script>

Note: If you are using as a Nuxt injection use '$sc' else use 'sc'.

4. Boundaries

Option 1: Specific range

Option 2: Screen size bigger than

Option 3: Screen size smaller than

@luaguillande - 31solutions.com

You might like!

Scss Helpers Library