How to go to an external site when clicking on a drawer link item

[april]

Hi guys,

I’d like to display a link to an external site on my left drawer. What is the best way of doing this?

The screenshot below shows what I was trying to do. When clicking on the “Blog” button, I want to make it go to the blog site. How can I achieve this?

I tried this code below and it didn’t work for my case.

<q-drawer-link icon=“exit_to_app” :to="{path: ‘http://blog.mydomain.com’, exact: true}" >
Blog
</q-drawer-link>

---

Update:
I edited the original question to clarify that I wanted to go to an external site.

[s.molinari]

Quasar uses vue-router to form the q-drawer-links. So, you need to form your routes in vue-router definitions, then your links will work.

https://router.vuejs.org/en/
https://github.com/quasarframework/quasar-template-default/blob/master/template/src/router.js

This is the router in the play-app, just for more examples.

https://github.com/quasarframework/quasar-play/blob/dev/src/router.js

Scott

[s.molinari]

Ah, and if you are trying to link to an external page/ site, then just use a normal href.

Scott

[april]

@s.molinari
Thanks for answering my question. Yes, I’m trying to link to an external site. Can you give an example how I may use the normal href in the context of the drawer link?

[s.molinari]

Um, what in particular do you want to know? It’s just a normal <a> tag.

Scott

[april]

@s.molinari
A normal <a> tag would look ugly on the drawer. I would need to have my own custom styling for it to look like other q-drawer-link elements. I was trying see if there was a clean way.

[s.molinari]

Yeah. You’ll have to add your own css to format the links.

Scott

[s.molinari]

Actually, there is a better solution.

http://quasar-framework.org/api/js-utils.html#Open-External-URL

Scott

[april]

@s.molinari
Thank you! I will have a look at this later.

[danielo515]

The provided links points to nowhere

[a47ae]

@danielo515 The docs structure changed, here is the new link: http://quasar-framework.org/components/other-utils.html#Open-External-URL

[dylanglockler]

Must have changed again: https://quasar.dev/quasar-utils/other-utils#Open-External-URL

[Serhioromano]

@s-molinari That is cook one. Thank you.

[eyedean]

It seems like <q-btn type="a" href="https://www.google.com">Go to Google</q-btn> works. I gut the hint from the Open-External-URL's documentation.