Having some troubles with routing...

[novel scroll]

Heyo o/, having some issues (and yes I'm a novice lol).

(copied from #💬・discussion)
If I go from page A to index it works perfectly fine, but if I go from index to page A, the it only changes the url, not the contents of the page. Some config I need to do before?

Structure

| app.vue
| pages/
---| index.vue
---| projects.vue

app.vue

<template>
    <NuxtPage />
</template>
  
  <style>
  .page-enter-active,
  .page-leave-active {
    transition: all 0.4s;
  }
  .page-enter-from,
  .page-leave-to {
    opacity: 0;
    filter: blur(1rem);
  }
  </style>

index.vue

<script>
import "~/assets/css/index.css";
import '~/assets/css/common.css';
</script>

<template>
  //[...]
  <NuxtLink to="/projects">Projects</NuxtLink>
</template>

projects.vue

<script>
import "~/assets/css/projects.css";
import '~/assets/css/common.css';
//[...]
</script>

<template>
  [...]
  <NuxtLink to="/">Back home</NuxtLink>
  [...]
</template>

Can post more info if necessary.
Also feel free to ping me if answering ^^

Also found these errors, didn't want to open a report just yet to be absolutely sure its not on my end

[wintry vortex]

There is probably an error in your projects page, which prevents navigation. Could you share the contents of your projects page?

[novel scroll]

Sure! This is my first nuxt project so my script probably isn't the best lol (script/methods/etc..)

<script>
import '~/assets/css/projects.css';
import '~/assets/css/common.css';
let a;
let b;
let c;
let focused_lucidez = false;

function checkVisible(elm) {
    let rect = elm.getBoundingClientRect();
    let viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
    return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

export default {
    methods: {
        handleScroll() {
            document.querySelector('.lucidez').style.setProperty('--offset', `${Math.floor(window.scrollY / 25) * 10}px`);
            document.querySelector('.crust').style.setProperty('--offset', `-${window.scrollY / 2.5}px`);
            if (focused_lucidez && !checkVisible(document.querySelector('.lucidez > iframe'))) {
                document.querySelector('.lucidez > iframe').contentWindow.location.reload();
                focused_lucidez = false;
            } else if (checkVisible(document.querySelector('.lucidez > iframe')) && !focused_lucidez) {
                focused_lucidez = true;
            }
        }
    },
    beforeMount() {
        if (process.client) {
            c = setInterval(() => {
                b = a.querySelector("canvas").getContext('2d').getImageData(0, 0, 1, 1).data;
                document.querySelector('.lucidez').style.setProperty('--background', `rgb(${b[0]},${b[1]},${b[2]})`);
            }, 500);
        }
        a = document.querySelector('.lucidez > iframe').contentDocument || document.querySelector('.lucidez > iframe').contentWindow.document;
        window.addEventListener('scroll', this.handleScroll)
    },
    beforeUnmount() {
        window.clearInterval(c);
        window.removeEventListener('scroll', this.handleScroll)
    },
    onMounted() {
    }
}
</script>

[novel scroll]

also it seems like my projects.css is also importing my index.css, which is only called in pages/index.vue, not even in app.vue

Might be related

[wintry vortex]

Why are you importing css into <script>? If it's common css, you should look into the css property in nuxt.config (look up in Nuxt docs)

Also, I think in Vue it's usually better to use template refs instead of querying document selectors.

I also had the same problem when app would not navigate after changing the url, and it was always caused by my code in the page 😀

[novel scroll]

I come from vanilla front-end (So regular HTML, CSS and JS) and have been trying to follow the guide as closely as I can, hence why its there is so much stuff that might not be vue or ts or nuxt correct... I'll look into it with this knowledge in mind

Thank you so much for your response and cheers!

[novel scroll]

Found out the issue... I think Vue doesn't like Logical OR Assignments (a ||= b, cant blame them lol)

Is it ok if I ask one last question? It seems some of my css's ||(don't know the plural, stylesheets? :p)|| are being applied to other pages, when I want them to only be applied in one specific page. Do I have to configure something out?

[wintry vortex]

Why don't you put all of those stylesheets 😄 into the <style> block within your page, since you're not using them anywhere else?