I want to redirect the user to an external link in a new tab using the navigateTo method. I couldn't find an option to do that similar to having target="_blank" in the html tag <a href="https://google.com" target="_blank"> for example
is there is a way to add such a parameter to the navigateTo method?
<script lang = "ts" setup>
function onEventTriggered() {
return navigateTo('https://google.com', {
external: true,
})
}
</script>
I'm not sure that you could use a method called navigateTo to "open" something in another tab, would be quite non-intuitive and strange because of it's naming.
You can try this approach tho, to simulate the exact same thing without even needing to add it to the DOM
<script setup>
function openExternal(endpoint) {
const link = document.createElement('a')
link.href = endpoint
link.target = '_blank'
link.click()
}
</script>
<template>
<button #click="openNewTab('https://google.com')">
Open in new tab
</button>
</template>
Related
I am expecting to include on my web application an effect that underlines the section where we are in the list of sections.
I am working with Nuxt.
I don't know why the following code does not change the value of the boolean isActive.
<nuxt-link
:to="`${path}/${filterItem.filter}`"
:style='{"text-decoration": (isActive ? "underline" : "none")}'
#click="selectSeason(filterItem.filter) toggleUnderline()" >
methods: {
selectSeason(filter) {
this.$router.push(`${this.path}/${filter}`)
},
toggleUnderline() {
this.isActive = !this.isActive
}
},
You could probably achieve this with something like this
<template>
<nuxt-link to="/about" :custom="true">
<a #click="test">go to about page</a>
</nuxt-link>
</template>
<script>
export default {
methods: {
test() {
console.log('called test method')
},
},
}
</script>
As shown here: https://github.com/vuejs/router/issues/846#issuecomment-808150258
Even thought, this is probably not the best approach overall and seems quite too hacky for a simple use case.
Use a button tag if you want an action, otherwise put conditional logic on your route but don't mix a client side navigation and some kind of click events.
In Nuxt3 <NuxtLink> will get a class="router-link-active router-link-exact-active" if it's active, so you can use those to underline active link.
Same as router-link, you need to use v-on:click.native
<nuxt-link
:to="`${path}/${filterItem.filter}`"
:style='{"text-decoration": (isActive ? "underline" : "none")}'
#click.native="selectSeason(filterItem.filter) toggleUnderline()"
>
</nuxt-link>
How do we v-on:click nuxt-link?
Nuxt3:
<script lang="ts" setup>
const anyFunction = () => {
console.log('easy')
}
</script>
<template>
<NuxtLink
:to="'/'"
#click.prevent="anyFunction()"
>easy</NuxtLink>
</template>
In my apps I have a couple of pages that show some embedded forms...
The forms come from jotform, and are embedded with a js script like this
<section>
<script type="text/javascript" src="https://form.jotform.com/jsform/123124124"</script>
</section>
I cannot find a way to load this inside a component, so I'm trying to use a simple HTML partial. Is there a way to do this?
I try also with a component but it doesn't work
<script>
export default {
data: () => ({
}),
mounted() {
const scripts = [
"https://form.jotform.com/jsform/123124124124"
];
scripts.forEach(script => {
let tag = document.head.querySelector(`[src="${ script }"`);
if (!tag) {
tag = document.createElement("script");
tag.setAttribute("src", script);
tag.setAttribute("type", 'text/javascript');
console.log(document.body);
setTimeout(function() {
document.body.appendChild(tag);
}, 500)
}
});
}
}
</script>
<template>
<main class="main">
<h1 class="visuallyhidden">Funding Request</h1>
<section class="funding">
</section>
</main>
</template>
As suggested here you can try to use the iFrame version: https://www.jotform.com/help/148-getting-the-form-iframe-code/
FYI: including an embed script within a dynamic vue component is not an easy thing (as the JotForm support explaned here), so you might try to go for the iFrame version if it works for you :)
Hello I want to display a page with a link generated by a method.
Here is my current code.
<template>
<nuxt-link :to="seeProduct(item.sku.product.id).toString()">
<div>
<span>Go to product</span>
</div>
</nuxt-link>
</template>
<script>
export default {
methods: {
async seeProduct(id) {
const app = { $axios: this.$axios };
const urlProduct = await endPoint.getProduct(app, id);
console.log(urlProduct.url); // https://www.products/gants.html => this is the url
return urlProduct.url;
},
}
}
</script>
When I click on the link, the redirection is not good. How to do a good redirection with an URL generated by a method?
If it's an internal path, I do recommend you passing an actual path only or even better, a name as shown here: https://router.vuejs.org/guide/essentials/navigation.html#router-push-location-oncomplete-onabort
It should look something like :to="{ name: 'gants' }" when your seeProduct method is done.
I am using following snippet to open a link in default browser.
<template>
<div>
<a #click.prevent="fireUpLink">External Link</a>
</div>
</template>
.
<script>
/* global nw */
export default {
methods: {
fireUpLink: function() {
nw.Shell.openExternal("http://example.com/");
}
}
};
</script>
But lets say if I have thousands of links, this solution is not scalable. Is there any better way?
In a Vue SFC, it expects a referenced variable to be defined or imported in the component, or be global. If you reference it from the global window object, it should work.
window.nw.Shell.openExternal('http://example.com');
For Vue, as shown by Max, <a #click.prevent="window.nw.Shell.openExternal('http://example.com')">Link</a> works.
You could also just create a component:
<template>
<a
:href="url"
class="link"
#click.prevent="openExternal"
><slot></slot></a>
</template>
<script>
export default {
name: 'ExternalLink',
props: {
url: {
type: String,
required: true
}
},
methods: {
openExternal: function () {
window.nw.Shell.openExternal(this.url);
}
}
};
</script>
Then just reference it like this:
<external-link url="http://example.com">Link</external-link>
Alternatively you could create a mixin that has the openExternal method in it, and globally install it across all components, so you can just do <a #click.prevent="openExternal('http://example.com')>
If you are using something other than Vue, which does not use a Virtual DOM, then you could just add a class="external-link" then target all elements on the page with that class and handle them.
$('.external-link').click(function (evt) {
// Prevent the link from loading in NW.js
evt.preventDefault();
// Get the `href` URL for the current link
let url = $(this).attr('href');
// Launch the user's default browser and load the URL for the link they clicked
window.nw.Shell.openExternal(url);
});
I have a logic like this: is the user is V2 use the user to the url in subHeaderRouter.router. If the user isn't launch this.openModal:
<router-link
v-for="subHeaderRouter in subHeaderRouters"
:to="subHeaderRouter.router"
#click="handleOpenModal()">
</router-link>
handleOpenModal () {
if (this.IsV2User) return
this.openModal('changeUserType', 'user.changeUserType')
}
The only thing I need to do now is to stop :to then she user is not V2. How to accomplish that?
You can prevent the default <router-link> behavior by specifying no default event to listen to and handling the click event manually with the .native modifier:
<router-link
v-for="subHeaderRouter in subHeaderRouters"
event=""
:to="subHeaderRouter.router"
#click.native.prevent="handleOpenModal(subHeaderRouter.router)"/>
handleOpenModal(route) {
if (this.IsV2User) {
this.$router.push(route)
} else {
this.openModal('changeUserType', 'user.changeUserType')
}
}
If the event="" seems weird to you, it also works with an empty attribute:
<router-link
v-for="subHeaderRouter in subHeaderRouters"
event
:to="subHeaderRouter.router"
#click.native.prevent="handleOpenModal(subHeaderRouter.router)"/>
Vue 3 Solution
In Vue3, the event has been removed from "<router-link>, you will need to use v-slot API instead.
<router-link :to="yourRoute" custom v-slot="{ href, navigate }">
<a v-if="yourBoolean" #click="handleEvent()">Run the function</a>
<a
v-else
:href="href"
#click="navigate">
Go to route in "to"
</a>
</router-link>
// Vue 3 Composition API
export default {
setup() {
const handleEvent = () => {
// Add your logic here
}
}
};
I had the same problem and used dynamic Vue Components as solution. You will also have to check the difference in styling for router and div tag.
<component
:is=" condition ? 'router-link' : 'div' "
#click="handleOpenModal"
:to="your_link">
</component>