Vue anchor hash links. Is it possible to create a mix of createWebHashHistory & createWebHistory rou-CodePudding

I using vueJS3 and have the following menu list:

const menu = [
    {ref: "../#home", name: "Home"},
    {ref: "../areas", name: "Areas"},
    {ref: "../#contact", name: "Contact"},
];

<nav >
  <ul>
    <li v-for="(link, index) in menu" :key="index">
      <router-link :to="link.ref" @click="clicked">{{ link.name }}</router-link>
    </li>
  </ul>
</nav>

Unfortunately, the router-links with hash anchor links do not work. Alternatively I had used <a :href="link.ref" ...</a>. But I actually want to avoid that and want to move in the vue router link context. Is there a solution for this?

CodePudding user response：

Status 2022-11

To bring it to a close at this stage, here is my workaround. As @kissu suspected in his comment: totally clear, it's just not working for some reason. Not sure what changed with the latest vue-router/vue3 here. Investigating myself because it's a bummer. I'll maybe create a github issue at some point, it could be a Vue router bug. For this reason I had to write a solution quickly. It is only a workaround but clear and I would also say not dirty. But you should be able to use it via the vue-router in the future.

In my case it was only two hash links that were both on the home. For this reason I put a method in my script setup that does the logic of scrolling to a specific ID selector. Then I put a watcher on the route.hash that checks if the hash in the url changes.

<script setup>
import { watch, onMounted} from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

onMounted(() => {  
  scrollIfHashRoute();
});

const scrollIfHashRoute = function() {
    const element = document.querySelector(route.hash);
    const postionHeight = element.getBoundingClientRect();
    window.scrollTo(0, postionHeight.top   window.scrollY);
}

watch (
  () => route.hash, 
  (current, prev) => {
    scrollIfHashRoute();
  }
);

CodePudding user response：

Update: found a way for that one.
You need to configure

PS: this is more of a repro than an actual answer (easier to share on Discord).

It works perfectly in a Nuxt2 app (with vue-router v3.5.3).

With a default Vue3/Nuxt3 config (with v4.1.6) meanwhile, it does not work aka

import { createRouter, createWebHistory } from "vue-router";
import Index from "../views/Index.vue";
import About from "../views/About.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "index",
      component: Index,
    },
    {
      path: "/about",
      name: "about",
      component: About,
    },
  ],
});

export default router;

I've read this migration part but I'm still not sure where the issue is coming from or if anything should change at all.

Below is an example of snippet that does not work.

HomeView.vue

<template>
  <main>
    <router-link :to="{ name: 'about', hash: '#scroll' }">
      Let's scroll to about   #scroll !!
    </router-link>
  </main>
</template>

AboutView.vue

<template>
  <div>
    <br />
    <br />

    <router-link :to="{ hash: '#scroll' }"> Let's scroll !! </router-link>
    <a href="#scroll">a link</a>

    <p >
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
    </p>
    <br />
    <br />

    <p id="scroll">supposed to scroll to this point</p>
    <br />
    <br />

    <p >
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
      Eos consequatur et necessitatibus sapiente perspiciatis similique. Dicta
      illum recusandae voluptas. Distinctio odit velit. Adipisci cupiditate
      pariatur odio est sunt illum eaque voluptas fuga. Tempora itaque omnis
      eveniet ea unde non ea minima. Et cum voluptates non in molestiae officia
      sint voluptas. Aut laborum non quis eaque. Ipsam iste consectetur alias
      vel quos consectetur eaque eos iste. Id mollitia ratione libero sit
      cupiditate. Et totam corporis dolor officiis unde reiciendis. Et iure
      voluptas ipsa voluptatibus. Saepe incidunt rem molestias voluptatem
      voluptas delectus et porro dolores. Quaerat vero neque maiores blanditiis.
    </p>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>