manifest/nuxt/app.vue

<script setup="setup">

const { $i18n } = useNuxtApp()

const nastavitveStore = useNastavitveStore()
const pojmiStore = usePojmiStore()
const straniStore = useStraniStore()

const { izbraniJezik } = storeToRefs(nastavitveStore)

// Nastavi locale ko se jezik spremeni
watch(izbraniJezik, jezik => {
  $i18n.setLocale(jezik)
  pojmiStore.naloziPojme(jezik)
  straniStore.naloziStrani(jezik)
})

// V store nastavi prvotno stanje
nastavitveStore.izberiJezik($i18n.locale.value)

</script>

<template>
  <section class="yufu">
    <Glava />
    <div class="vsebina">
      <NuxtPage />
    </div>
    <footer>
      <Noga />
    </footer>
  </section>
</template>

<style>

:root {
    --siva: #D9D9D9;
    --bela: #fff;
    --crna: #000;
    --rdeca: #f00;
    --roza: #ED008C;
  }

  body {
    font-family: Inter;
    margin: 0;
    background: var(--siva);
  }

  a {
    color: var(--crna);
  }

  h1 {
    text-align: center;
    font-size: 5rem;
    margin: .2rem 0 1rem 0;
  }

  h2 {
    text-transform: uppercase;
    margin-top: 0;
  }

  .vsebina {
    position: relative;
    z-index: 50;
    padding: 0 32px;
  }

  a.gumb {
    text-transform: uppercase;
    text-decoration: underline;
    font-size: 3rem;
    position: relative;
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .stran {
    position: relative;
    background: var(--bela);
    margin: 2rem;
    border-radius: 3rem;
    padding: 2rem;
  }

  form {
    display: flex;
    flex-direction: column;
  }

  input[type=submit] { margin-top: 1rem; }

  details > summary {
    list-style: none;
  }

  .gumb {
    font-family: Trailers;
    font-size: 3rem;
    cursor: pointer;
    border: none;
    background: none;
    text-decoration: underline;
    width: fit-content;
    z-index: 100;
  }

  footer {
    position: relative;
    z-index: 100;
  }


  @media screen and (max-width: 420px) {
    .vsebina {
      padding-right: 0;
      padding-left: 0;
    }
    .stran {
      margin: 0;
    }
  }

  .okvir {
    position: relative;
    background: var(--bela);
    margin: 2rem;
    border-radius: 24px;
    padding: 2rem;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    max-width: 1216px;
    margin-left: auto;
    margin-right: auto;
  }
</style>