0

I using vueJS3 and have the following menu list:

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

<nav class="overlay-menu">
  <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?

Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
  • No need for a hash here. If you want to navigate to an ID in your template, you can use the following: https://stackoverflow.com/a/72302827/8816585 Also, if it's not to an ID, what would be the use case for such hash? – kissu Nov 08 '22 at 11:10
  • Please be more precise. What is not working exactly? What about the second part of my previous comment: why do you need a hash at all? To live to an anchor ID or more specific use case? – kissu Nov 08 '22 at 11:16
  • @kissu The use case of a hash links: To scroll to the ID on a page. For example:(a href="#top">..). What doesn't work: It doesn't scroll to the location. But Vue changes the browser history correctly. If I do it with real anachors it works but then the spa loses its character because the page is reloaded hard. – Maik Lowrey Nov 08 '22 at 11:24
  • 1
    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. – kissu Nov 08 '22 at 12:16
  • @kissu I had already thought about doing something in the vue onMounted method with window.location.hash and getBoundingClientReact(). but my attempt failed. My secound attempt was to try with the scrollBehavior() function but it failed too. – Maik Lowrey Nov 08 '22 at 13:04
  • 1
    Nah, far too ugly. Even using `a` tags is 20x cleaner. I'll send a discord/issue when I'm back at home. – kissu Nov 08 '22 at 13:16
  • Hello @kissu! I'm curious if you've made any progress? ;-) – Maik Lowrey Nov 09 '22 at 20:21
  • 1
    Sorry for being late, asking now! – kissu Nov 10 '22 at 10:11
  • Just found an answer by myself, check the update. – kissu Nov 10 '22 at 10:32
  • @kissu That is what i already metion it two days before. `I had already thought about doing something in the vue onMounted method with window.location.hash and getBoundingClientReact(). but my attempt failed. My secound attempt was to try with the scrollBehavior() function but it failed too.` But i dont work for me. – Maik Lowrey Nov 10 '22 at 10:35
  • Sorry if I missed that part! I'm pretty sure you have a typo or some sort of error somewhere because it works flawlessly on my side. Maybe you could create a small [repro] or maybe you do have a public github repo? Got any errors in the console or alike? – kissu Nov 10 '22 at 10:38
  • @kissu Ok. I will check it and give you a feedback. Hope that i have a typo :-) – Maik Lowrey Nov 10 '22 at 10:39
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/249477/discussion-between-maik-lowrey-and-kissu). – Maik Lowrey Nov 10 '22 at 10:40

2 Answers2

1

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();
  }
);
Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
1

Update: found a way for that one.
You need to configure scrollBehavior for it to work. The migration guide from Vue2 mentions it.

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),
  // important part here 
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return {
        el: to.hash,
      };
    }
  },
  // important part above 
  routes: [...],
});

export default router;

Posva indirectly helped me solving that one via Discord.

enter image description here

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 class="big-block">
      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 class="big-block">
      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>
kissu
  • 40,416
  • 14
  • 65
  • 133
  • I am happy to read from you. No problem that it took longer. I'll try out your answer during the day and give you feedback. But for your effort here already +1 :-) Merci – Maik Lowrey Nov 10 '22 at 10:18
  • What do you mean about may answer? https://stackoverflow.com/a/74387230/14807111 – Maik Lowrey Nov 10 '22 at 10:19