VUE.js question (integration in Kirby)

Hello there

I am trying to build the TailwindCSS-Example Navbar in Kirby:

https://tailwindcss.com/course/making-the-navbar-responsive

The original sourcecode is here: https://github.com/tailwindlabs/designing-with-tailwindcss/tree/master/03-building-a-responsive-navbar/03-making-the-navbar-responsive

My problem is that I cannot get it to work. The navbar is not rendered at all: https://kgsrastede.de/devblog

I am pretty sure that there is a stupid mistake in my files somewhere, but I just cannot find it. As nothing is rendered at all I guess that the Vue-App is not loaded correctly. This is not strictly a Kirby-Issue but outside Kirby it works, I just cannot get it to work inside my Kirby-page.
Perhaps somebody in here is kind enough to have a look. I am pretty sure that a Vue-developer sees that issues quickly.

My code is here:

https://git.kgsrastede.de/KGS-Rastede/homepage/src/branch/master/assets/js

and here is the header: https://git.kgsrastede.de/KGS-Rastede/homepage/src/branch/master/site/snippets/header-devblog.php

TailwindCSS itself works, the VUE-tutorial-code works (for example this works inside Kirby: https://scrimba.com/p/pXKqta/cQ3QVcr) so I am reasonable sure that the issue is how I use Vue inside Kirby.

Thanks you for any help!
Carsten

The first thing that springs into my eyes is that you are using PHP code inside your Vue template <?= $kirby->url('assets') ?> which is not possible. Don’t know if that is related to your issue, but that code should be removed.

Also, it doesn’t really make sense to import a file from a http address, but you should import from the local path.

I guess that makes sense. I corrected this, still doesn’t work though…

Now your filename is incomplete, it’s Navbar.vue not Navbar.