CODEWITHSUNDEEP
vue.js
Be Kind
Be Kind

Reputation: 5182

Vue - render a component in one of the multiple places inside parent template

I'm building a responsive navbar - component that uses child component, and I need to show that component differently for mobile and desktop versions - markup doesn't allow me to do that easily. Currently I duplicated one element in 2 places, and hide one of them at a time (depending on window size), which is fine as long as user doesn't change window size (if sHe does it gets ugly - eg popup that was visible for desktop-width will disappear if window was reduced to width of a mobile).

Edit

+now I'm displaying component (search field) in 2 places inside Navbar, seeing that I need to display it both for desktop version (on navbar panel), and mobile version (hamburger dropdown, which is hidden for desktop). Here is code sample explaining what I mean, child component's name is search-records (css framework is Bulma). The idea is to display only one of "< search-records >" at a time - but I cannot use media queries or v-if approach, because I'll have to sync those 2 components, and I'm curious if there's some simple way to handle this issue:

<header class="nav">
    <div class="container">
        <div class="nav-left">
            Logo placeholder
        </div>
        <div class="nav-right is-hidden-tablet">
            <a class="nav-item is-pulled-right">
                <search-records></search-records>
            </a>
        </div>
        <span class="nav-toggle">
          <span></span>
          <span></span>
          <span></span>
        </span>
        <div class="nav-right nav-menu">
            <a class="nav-item is-pulled-right is-hidden-mobile">
                <search-records></search-records>
            </a>
        </div>
    </div>
</header>

Upvotes: 0

Views: 1403

Answers (1)

Ikbel
Ikbel

Reputation: 7851

Try this approach. Here is how the template may look like.

<template>
  <div class="wrapper">
    <div v-if="isMobile" class="desktop-view">Desktop</div>
    <div v-else class="mobile-view">Mobile</div>
  </div>
</template>

Your component script should look something like this.

export default {
  data() {
    isMobile: false,
  },

  methods: {
    onResize() {
      this.isMobile = window.innerWidth < 720
    },
  },

  mounted() {
    this.onResize()
    window.addEventListener('resize', this.onResize)
  },

  beforeDestroy() {
    window.removeEventListener('resize', this.onResize)
  }
}

Upvotes: 1

Related Questions