NUXT_FRONTEND/components/Search.vue

<template>
  <div>
    <button class="button button_icon" @click="$modal.show('search-modal')">
      <span class="button__icon"> <BaseIcon :name="'search'" clear /></span>
    </button>
    <modal name="search-modal" adaptive>
      <div class="search_modal">
        <h2>Поиск</h2>
        <BaseInput v-model="string" @keyupEnter="goToSearch"></BaseInput>
        <button
          class="catalog-main__subscribe button button_grey-dark button_grey-dark-short"
          @click="goToSearch"
        >
          Найти
        </button>
      </div>
    </modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      string: "",
      searchList: [],
    };
  },
  methods: {
    goToSearch() {
      this.$modal.hide("search-modal");
      this.$router.push({
        name: "search",
        params: {
          query: this.string,
        },
      });
    },
  },
};
</script>

<style lang="less">
input[type="text"] {
  width: 100%;
  display: block;
  max-width: 350px;
  padding: 0;
  line-height: 1;
  border: none;
  border-radius: 0;
  background: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  color: #000;
  height: 44px;
  padding: 0 15px;
  font-size: 18px;
  border: 1px solid #ebebeb;
}
.search_modal {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 20px;
  @media (max-width: 576px) {
    align-items: flex-start;
    flex-direction: column;
    input,
    button {
      margin: 10px 0;
    }
  }
}
</style>