Nuxt js external URL and auto close - javascript

I was in the process of creating a PWA using NUXT. I'm using Veutify as the design component.
My requirement is:
I need to open a external URL, inside the app itself (not in a new browser page/tab)
Secondly, I need to detect closing or url change on the page loaded, and trigger a router push automatically
Any help would be appreciated. Thanks.

For your first question, if you want to access an external url in Vuetify, use the 'href' attribute instead of the 'to' attribute. e.g
<v-btn
large
nuxt
depressed
rounded
href="https://www.google.com/"
>Access Google</v-btn
>
And for your 2nd question, you can use a watcher e.g
watch:{
$route (to, from){
//Perform action here
}
}

Related

How to inject in a google chrome extension a CSS file on a page conditionally on extension storage data?

I have a popup settings page that is changing a boolean inside chrome.storage.sync to enabled/disabled based on a checkbox.
In my manifest I am adding page.js when matching to a specific page URL.
Inside this page.js how do I load a css file conditionally on that boolean inside the chrome.storage.sync?
I want to inject a file, not a css string... the examples show chrome.scripting.insertCSS with a string
Visit https://developer.chrome.com/docs/extensions/reference/scripting/#method-insertCSS
then click on CSSInjection link and read carefully
chrome.scripting.insertCSS(
injection: CSSInjection,
callback?: function
)

How to remove the hash "#" symbol from url?

The website that I'm editing right now, every link at switching pages has hash symbol. And the page doesn't refresh everytime I switch and sticks on the last position of the site.
Where can I find the code and remove the hash from the url.
Does removing it will make the pages refresh everytime?
Vue is a Single Page Application framework. That means you don't have full page loads, instead page content is swapped out dynamically on the client.
Assuming you're using vue router, you can switch to historyMode which won't use # for urls and instead real urls.
From the docs:
The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.
To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload:
const router = new VueRouter({
mode: 'history',
routes: [...]
})
This will get you "normal" urls as seen anywhere else on the web.

Anchor tag redirects to react spa

I want to use an anchor tag in my react spa (using react-router). But if I give it, for example, an href value of google.com, it will just extend my spa route, to say myreactspa.com/sampleRoute/google.com. Is there any way to make my anchor tag directly link to google.com? Or must I append, for example, https:// to my href value? Thanks!
Use Route component rendering null and change the window's location.
<Route path='/externalresource' component={() => {
window.location.href = 'http://google.com'
return null
}}/>
You should append https:// to your URL and set the target attribute of the a tag to _blank. It is not a problem of React Router to handle external links.
So something like that:
Link
There is no need to try use React Router to handle external links
react-router (and similar) is specially designed for SPA. When you are trying to navigate to another website (external link), the router is not supposed to handle that. If you are using Link, then whatever path you pass, react-router assumes that to be a route of your SPA (this is expected behaviour, NOT a bug).
If you want to navigate to another website from your web-app, use plain anchor tag like this
Click here
If you want to open the page in a new tab use
Click here

How to make Angular.js routing urls into dynamic, so urls won't be long

So while I'm making my first angular app, I see that the urls change for different pages, which is what's suppose to happen. So say I click a button and this
http://localhost:63342/angularSPA/app/view2/view2.html
changes to
http://localhost:63342/angularSPA/app/view2/view3.html.
What will the users see once I upload this all to something like heroku or my own domain. Everytime I route them to a page, will they see this long URL and will it change everytime I click a button or something?
you only need to upload what is inside the app folder. so this:
http://localhost:63342/angularSPA/app/view2/view2.html
will become this:
http://localhost:63342/view2/view2.html
if you put your index.html file in your root/app directory it will get even shorter:
http://localhost:63342/index.html
However, you can use a number of directives to achieve page changes without changing the url.
https://docs.angularjs.org/api/ng/directive/ngSwitch
https://docs.angularjs.org/api/ngRoute/directive/ngView
https://docs.angularjs.org/api/ng/directive/ngShow
https://docs.angularjs.org/api/ng/directive/ngHide
https://docs.angularjs.org/api/ng/directive/ngIf
You could, but I don't know why you would, have your entire site be under index.html.
However, that means that the user's browser will have to load ALL of your 'stuff' before displaying the single page app. It also means you won't be able to use the power of routing.
Also, angular adds # in there.
Here is a good ui-router tutorial.
https://scotch.io/tutorials/angular-routing-using-ui-router

how to retain the template view in angular js routing

I am writing a web app similar to dropbox and gdrive, i fetch ids of file based on that it will be able to navigate from page to page, folder to folder, e.g /abc to abc/abc... All i need to do it from client side. I made it simple using AngularJS Routing(ui-router).
Here is my code
$stateProvider.state('dashboard.sync.root', {
url: "/*path",
templateUrl: "root.html",})
here user can navigate like http://myweb/dashboard/sync/root/abc or http://myweb/dashboard/sync/root/abc/.../../
while traversing from page to page the root.html(template) goes on changing.
Problem here is when I traverse back and forth, it doesnt store previous view. when i click back and forward button in browser. Any Solution Appreciated
You can use 3 different files to maintain your app:
header.html
body.html
footer.html
And use ng-view in body to include using your routes.

Categories