htmx
htmx copied to clipboard
Published
20 hours ago •
bigskysoftware
bigskysoftware
Htmx-Get will not trigger inside a Vue 2 app
Sorry if this a well known issue. I could not find anything mentioning it.
Essentially I am running into an issue when i want a link inside a Vue 2 app. However, it will not trigger any htmx. It will trigger outside the Vue app. This is a not a deal breaker but just posting in case anyone else runs into this issue.
Here is my attempt at a reproduction. First link nothing trigger but the second link will trigger.
<html>
<head>
<style>
.link {
text-decoration: underline;
color: blue;
}
.link:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div id="vueApp">
<a
class="link"
hx-get="/someurl"
hx-push-url="true"
>
Wont trigger
</a>
</div>
<a
class="link"
hx-get="/someurl"
hx-push-url="true"
>
Will trigger
</a>
<script src="https://unpkg.com/[email protected]" language="JavaScript"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js" language="JavaScript"></script>
<script>
window.onload = function() {
console.log("Page loaded");
const app = new Vue({el: "#vueApp"});
}
</script>
</body>
</html>
