Vue

by Jeevan Mb

HTML

<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
      
<div id="app">

  <!-- vue based transitions for enter and exit -->
  <transition name="fade">
    <header class="mdc-top-app-bar" v-if="!searchVisible">
      <div class="mdc-top-app-bar__row">

        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
          <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
          <span class="mdc-top-app-bar__title">Title</span>
        </section>

         <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
          <i class="material-icons mdc-top-app-bar__action-item" aria-label="Download" alt="Download" v-on:click="searchVisible = true">search</i>
        </section>

      </div>
    </header>
  </transition>

  <!-- vue based transitions for enter and exit -->  
  <transition name="fade">
  
    <!-- to handle enter click on input. This can be handled by handling key event as well. -->
    <form v-on:submit.prevent="postSearch">

      <!-- Even div would work. Made header, as it is replacing the header -->
      <header class="mdc-text-field mdc-text-field--fullwidth mdc-text-field--with-trailing-icon" v-if="searchVisible">
        <input type="text" v-model="searchTerm" id="my-input" class="mdc-text-field__input" placeholder="Search for something" style="padding-left: 16px;">
        
        <!-- Added a search icon just in case. text-field with trailing icon allows only one, so style  element. (I could be wrong here). Also, applying as class and external css is being overridden by other styles. -->
        <i class="material-icons mdc-text-field__icon" tabindex="0" role="button"...

CSS

body {
  background: #FFF;
  font-family: Helvetica;
}

/* vue animations */
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

Vue

const topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
const textField = mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));


new Vue({
  el: "#app",
  data: {
  	searchVisible: false,
    searchTerm: ""
  },
  methods: {
  	postSearch: function () {
    	alert(this.searchTerm);	
    }
  }
});