traxxx/assets/components/search/bar.vue

<template>
	<form
		class="search"
		@submit.prevent="() => search()"
	>
		<input
			v-model="query"
			:placeholder="placeholder || 'Search'"
			class="query"
			@input="() => search(true)"
		>

		<button
			type="submit"
			class="search-button"
		><Icon icon="search" /></button>
	</form>
</template>

<script>
function search(typing) {
	if (!typing || this.eager) {
		this.$router.replace({
			query: { query: this.query || undefined },
			params: { ...this.$route.params, pageNumber: 1 },
		});
	}
}

function resetQuery() {
	this.query = this.$route.query.query || null;
}

export default {
	props: {
		placeholder: {
			type: String,
			default: null,
		},
		eager: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			query: this.$route.query.query || null,
		};
	},
	watch: {
		$route: resetQuery,
	},
	methods: {
		search,
	},
};
</script>

<style lang="scss" scoped>
.search {
    display: flex;
    width: 100%;
}

.query {
    max-width: 40rem;
	min-width: 10rem;
    color: var(--text);
    background: var(--background);
    flex-grow: 1;
    box-sizing: border-box;
    padding: 1rem;
    border: none;
    box-sizing: border-box;
    box-shadow: 0 0 3px var(--darken-weak);
    font-size: 1rem;
    outline: none;

    &:focus {
        box-shadow: 0 0 3px var(--primary);
    }
}

.search-button {
    padding: 1rem;
    background: none;
    border: none;

    .icon {
        fill: var(--shadow);
    }

    &:hover {
        cursor: pointer;

        .icon {
            fill: var(--primary);
        }
    }
}
</style>