Natural Preference for Minification

    TypeScript icon, indicating that this package has built-in type declarations

    1.3.1 • Public • Published


    JavaScript Standard Style

    vue2 npm GitHub stars license Github file size


    Breaking Changes for verison 1.x:

    • Tag is now v-responsive the old v-responsiveness is no longer supported.
    • The file Vue_Responsive.common.js does no longer exist

    Is a directive to use responsive breakpoints on html elements. Because sometimes it's nice to have a chance to let the view do resolution specific things.

    • No further Dependencies
    • 🔧 Chrome, Firefox, IE11+

    📺 Check the Demo-link (IE11-Demo without webpack)

    📖 Docs

    🔧 Install

    npm install vue-responsive

    import responsive from 'vue-responsive'

    👈 Shortest usecase

    Just put the breakpoint identifiers behind the directive with dots:

       <div v-responsive.lg.xl >Only visible on desktop !</div>
       <div    >Visible on tablet ☺</div>
       <div >Only visible on smartphone!</div>

    👈 Small usage example

        <h1 v-responsive="'hidden-xs'">Big Title</h1>
        <div v-responsive="['hidden-all','xs','sm']">
          Only visible in small and extra-small windows
        <h1 v-responsive="middleSize">Big Jumbotron</h1>
      import vueResponsive from 'vue-responsive'
      Vue.directive('responsive', vueResponsive)
    	middleSize: ['hidden-all','lg','xl']


    This directive adds responsive Feautures to single HTML-Elements without CSS or @Media.

    The default Responsive breaks follow Bootstrap 4 Responsive Utils.

    The Bootstrap 3 breakpoints are includes as well.

    Do you miss a feature?

    Take charge and file an issue or add your idea or vote for your favorite feature to be implemented:

    Feature Requests


    In the browser just include the script and use the directive on a Html-Element inside a Vue Element

    <script src="Vue-Responsive.min.js"></script>

    Advanced: If you do not want the directive to be globally available just add the attribute notGlobal with a not empty value in the script tag and define it the components with:

        <script src="Vue-Responsive.min.js" notGlobal="true" ></script>	
    		// the global variable is 'index.vueResponsive'
    		responsive: index.vueResponsive

    For Bootstrap 4 breakpoints

    At default every resolution is visible, the hidden-all tag changes this to everything hidden (display:none). These tags are valid hidden-all, xs, sm, md, lg, xl, hidden-xs,...,hidden-xl.

      <h1 v-responsive="'hidden-xs'">Big Title</h1>
      <div v-responsive="['hidden-all','md','lg']">Only visible in Middle and large Size View</div>
      <div v-responsive="['hidden-lg']">Only hidden at lg</div>
      <h1 v-responsive="middleSize">Jumbotron</h1>
      ...	//in the vue object

    For Bootstrap 3 breakpoints

    Just add :bs3 after the directive to use bootstrap 3 breakpoints:

      <p v-responsive:bs3="['hidden-xs']">
        As you can see on the big picture below.<br /><img ... />

    In this defintion the xl breakpoint doesn't exist.

    For self defined breakpoints

    First you have to declar your own breakpoints in the component/root wich wraps the html-elements with the directive. Every definition must start with responsiveMarks$$ and a following name. So you can easily create breakpoints to differentiate between desktop and smartphones for instance, as you can see in the demo.html:

      <p v-responsive:twoMarks="'hidden-desktop'">
        Visible on smartphone<br />
        <img src="" />
      ... //in the vue object
        responsiveMarks$$twoMarks: {  //set a custom breakpoint with the name "twoMarks"
          smartphone: { 
            show: true, 
            min: -1, 
            max: 767 
          desktop: { 
            show: true, 
            min: 768, 
            max: Infinity 

    You can declar as much own definitions as you wish. Every defintion should have min:-1 for its smalles breakpoint and max:Infinity for its biggest.


    • Mixin to trigger methods on breakpoint change
    • Add and remove classes instead of changing only the style


    MIT MIT License


    npm i vue-responsive

    DownloadsWeekly Downloads






    Unpacked Size

    75 kB

    Total Files


    Last publish


    • reinerba