safetwitch/src/components/SearchBar.vue

<script lang="ts">
export default {
  setup() {
    return {
      searchInput: ''
    }
  },
  methods: {
    redirectToSearch() {
      const query = this.searchInput
      this.$router.push({ path: '/search/', query: { query } })
    }
  }
}
</script>

<template>
  <div class="relative md:block outline-none">
    <label for="searchBar" class="hidden">{{ $t('main.search') }}</label>
    <input
      type="text"
      id="searchBar"
      name="searchBar"
      :placeholder="$t('main.search')"
      v-model="searchInput"
      @keyup.enter="redirectToSearch"
      class="rounded-md text-white bg-none placeholder:text-black w-full outline-none"
      style="border-bottom: solid 1px white"
    />
  </div>
</template>