Switching Between Components with out Vue Router

When you are working with Vue Components you’re about needing to switch in between them. You can do it easily using Vue Router, but today I will show you who to implement your own simple and clean router.

Let’s try to create our component, I will try to explain every part to make it simple

Template part

  <div id="app">
      <div></div>
  </div>

Will declare two Const variables contains our two components

<script>
const Comp2 = {
  template: `
              <div>
              <h3>This is the second components</h3>
                  <button @click="setActive('comp-1')">
                      Back
                  </button>
               </div>
            `,
            props: ['setActive']
}

const Comp1 = {
  template: `
  	   <div>
              <h3>This the first Components that will switch from it</h3>
              <button @click="setActive('comp-2')">
                Go to Component 2
              </button>
              </div>
            `,
            props: ['setActive']

}
</script>

Comments about previous code

  • setActive: The method that will handle switching between our two components at click.
  • comp-1 & comp-2: Our components name.

The Vue Part

new Vue({
  el: '#app',
    data() {
    return {
      ActiveComponent: 'comp-1',
    }
},
  components: {
   'comp-1': Comp1,
   'comp-2': Comp2,
  },Como
  methods: {
        setActive(compenent){
 			this.ActiveComponent = compenent;
      }
  }
});

Comments about previous code

  • ActiveComponent: The property that will give us the active component on-load.
  • Components Name
  • And the SetActive Method

Let’s return to the template part and will add

  • :is=”ActiveComponent”: to render activated component
  • :set-active=”setActive”: The function that will work on click to change to the targeted component.

So our template part will be like that

  <div id="app">
      <div :is="ActiveComponent" :set-active="setActive"></div>
  </div>

So the whole code is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE Switching components</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
	#app {
	  font-family: Avenir, Helvetica, Arial, sans-serif;
	  text-align: center;
	  color: #2c3e50;
	  margin-top: 60px;
	}

	a,
	button {
	  color: #4fc08d;
	}

	button {
	  background: none;
	  border: solid 1px;
	  border-radius: 2em;
	  font: inherit;
	  padding: 0.75em 2em;
	}
	</style>

</head>
<body>
    


  <div id="app">
      <div :is="ActiveComponent" :set-active="setActive"></div>
  </div>


<script>
  
const Comp2 = {
  template: `
              <div>
              <h3>This is the second components</h3>
                  <button @click="setActive('comp-1')">
                      Back
                  </button>
               </div>
            `,
            props: ['setActive']
}

const Comp1 = {
  template: `
  			<div>
              <h3>This the first Components that will switch from it</h3>
              <button @click="setActive('comp-2')">
                Go to Component 2
              </button>
              </div>
            `,
            props: ['setActive']

}

new Vue({
  el: '#app',
    data() {
    return {
      ActiveComponent: 'comp-1',
    }
},
  components: {
   'comp-1': Comp1,
   'comp-2': Comp2,
  },
  methods: {
        setActive(compenent){
         this.ActiveComponent = compenent;
      }
  }
});


</script>

</body>
</html>

Hope it’s helpful for someone

Leave a Reply

Your email address will not be published. Required fields are marked *