Add Vue.js to existing non-single page application - javascript

I have a CMS backed web site where Vue.js was added to handle a UI feature of the site. The feature has tabs that switch content on the page. I need to make the tabs deep linkable as in there needs to be a way to have a certain tab set as active on page load. I can easily achieve this using a URL has but I would like to see if I can just use the Vue.js router. I haven't been able to find any resources to add the router to an existing site that isn't fully powered by Vue.js.
Is there way to add vue-router without any additional server configuation?

You could use Vue Router in the hash mode for history. Your URL would end up being something like www.example.com/post/1#tab1 and www.example.com/post/1#tab2.
One caveat, if SEO is important to this site, then you would need to do the routing on the server to make the page easier to crawl by Google.

Related

Is dynamic meta setting (helmet) useless for SEO if you're not using "ssr" react? (next, gatsby)

I got myself in a rabbit hole when trying to implement SEO in my SPA.
My page has /about and /blog routes.
/blog client-side renders a /nav with a href list to individual blog posts, each with its one "mocked" url which I'm handling through history API and a node greedy route.
I want my blog posts to be index-able by google. Not only that, I want my blog pages to have previewable links when their url is pasted on other websites that support it.
This led me to Google's SEO for Javascript guide and Open Graph Pattern for links previewing, which made crystal clear I need to properly refer hrefand set some meta tags.
I'm facing issues with setting meta tags. I know react helmet for instance can handle meta tags.
The issue is, as dynamic content is being rendered by browsers, it's not available in the HTML via a simple get request. One need to crawl it with a headless browser to render javascript. Google crawler can crawl dynamic webpages, but many other services don't.
So, how useful is helmet for SEO in fact? Is it really useless if you're not server side rendering each page?

Creating AngluarJS Apps but don't have a server side option for SEO Friendly URLs. Will This Work?

I am creating an angular app that is hosted on a webserver that doesn't allow me to edit htaccess files or webconfig. There is no server side language option available which means no middleware for creating HTML snapshots. This is a high dollar CRM with webstore and no option of switching hosts.
So I have come up with my own "solution" to the issue. Would it be considered ok to create hyperlinks that link to url's that will generate the same view that will be updated by an onClick event. This way the user will see the content loaded immediately, but bots will have to reload the page at the new url to see the page content.
Example:
View 2
I'm struggling to find a good solution to this issue, and I know others have to be in the same situation as me when it comes to development. The code above is just a visual reference to what I am referring to.
Have you looked at
grunt-html-snapshot
After implementing this and testing this, it does work well. Google sees them as new pages and the user never has to worry about loading new content.

When does a browser logs a history?

Does a browser logs a history on url hit? or when all the resources of an html page are loaded?
In my page, few external links make my landing page load a little longer..though the html(view) page is rendered. Based on a condition check, angular js routes to the second page quickly, but the browser history log doesn't store the first page's entry. We have back button functionality enabled in our page. So when a user clicks on browser back button, it should show the first page. But instead, browser's home page is rendered.
I've already asked a similar question related to angular js here:
Angular JS - How to force browser to log history for quick routing?
I'm unable to adopt both the solutions since we're not encouraging any third party scripts such as angular ui-router. Also, the second solution is not adoptable since after $http.get('/someUrl') we need to delay for few seconds to call another service. If "someUrl" takes some 6 to 7 seconds, we need to know this delay beforehand (which is indefinite) to call another service.
AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the $route service in the Angular ngRoute module, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.
States are bound to named, nested and parallel views, allowing you to powerfully manage your application's interface.
For more help refer this
Angular JS - How to force browser to log history for quick routing?
Angular's $location.replace() did the magic at last.
Previously I was using $location.url('/somepath') which was only redirecting to my browser's home page instead of saving first page's history.

Displaying External Webpages within an Enyo App

I'm new to Enyo and am trying to implement display interface for my website within an Enyo app.
Basically all that I want to display is the app's toolbar on the top of the page, and the rest of the page would simply display the contents of my website.
Considering that my website is already optimized for responsive display, how do I implement this without encountering Cross-Origin issues?
I think you'll want to embed your site's contents within an iFrame. You haven't said whether the app buttons will need to interact with your site's contents so you may run into some issues there.
You don't quite have enough detail for a better answer. What cross-origin problems do you predict? Where will you be deploying? Will you be pulling the site live or will you have a cached copy you distribute with the Enyo app?

Facebook-like content load

I'm working on a big website at the moment and the designers are talking about making a facebook-like content area.. By this they mean that they want to keep the header loaded at all times and then only reload the content area when a link is clicked. Still we want to change the url to keep the framework working as well when accessing some page directly.
I'm not sure how to explain this any further - check out facebook and take a close look at the header whenever you navigate to another page..
Thanks..
I'm not sure if you're even asking a question, but here's my response.
Facebook, like most other major websites, use frameworks (custom built, or not) to separate a template into components, separate code logic from design, and more.
The reason why the url and the header will not change is because one of the designated areas of the body is acting as a container. When links are clicked, the data is gotten via remote procedure calls... via their facebook API. The content that is returned is then loaded into that container via javascript.
keywords: ajax, rpc, rest api, javascript, mvc, framework.
all of those things are important to that style of web development.

Categories