My Laravel 5.6 app has a Vue.js frontend. The Vue.js app is in the resources directory. I have gone through several articles that use Prerender SPA plugins. These articles are for the stand alone vue.js app and have an index.html file. In Laravel's case we have index.php. How do I make my Laravel Vue.js App SEO freindly. At a minimum I would like to make the front/home page of the app SEO friendly.
I think, as an alternative solution, you can use https://prerender.io/ service (up to 250 pages Free for caching) to do the pre-rendering for your SPA application.
If you are going to implement https://prerender.io/ service, you would require to generate all the sitemap URL paths and upload them to this service via their npm plugin (prerender-spa-plugin) and configure your .htaccess file for search engine crawlers. So search engine crawlers will redirect to this pre-render service and picked your website, cached static web page for service engine indexing, and show that cached page as the search result.
For more info, you can refer below;
https://prerender.io/documentation
https://snipcart.com/blog/vue-js-seo-prerender-example
Cheers!
Definitely recommend checking out Nuxt.js! It is a production-ready framework built on top of VueJS. With Nuxt.js You can create 100% SEO-friendly app with SPA-like routing.
Check this awesome Toptal article about "Creating Server-side Rendered Vue.js Apps Using Nuxt.js"
Related
I have a Laravel API.
The front end application is completely separate from Laravel.
All Laravel routes are located in routes/api.php
Is there any way to make the Laravel Debugbar work in this case?
https://github.com/barryvdh/laravel-debugbar
barryvdh/laravel-debugbar needs to be installed on your Laravel project (actually all debuggers need to be present within the project to audit every request) and get its files served to the frontend to work (edit repsonses with Middleware/InjectDebugbar.php).
I won't say that it is impossible to get its insights on a separate front, who knows if you are ready to fork the project and communicate with the debug bar APIs.
For a simpler alternatives you can use:
laravel/telescope docs repo
Clockwork browser extension website repo
spatie/laravel-ray(paid) website docs
I am new here and new to Laravel, sorry if I am posting in the wrong place or if I should ask it in another place. I have a Laravel application I want to deploy on Google Cloud Platform - App Engine. However I want a setup with a landing page and the laravel app in a different directory, so I can have something like mydomain.com poiting for my landing page and dashboard.mydomain.com poiting to my Laravel app. How is the best approach to make it:
1 - Two Laravel apps one for the landing page and one for the dashboard application in a subdirectory?
2 - A simple static html landing in the main directory and the laravel dashboard appication in a subdirectory?
3 - Two separeted google cloud platform projects, one for the landing page and the other for the dashboard app?
I have no idea how is the best and professional method of doing it here. I really appreciate some opinions here.
I need a bit of expert feedback on this please as I do not want to start my project in the wrong way.
I would like to keep my Vue code separated from Laravel, the reason being, I may use this vue app later on on Cordova.
First question:
I understand how to host the Laravel API and Vue app on 2 different domains, no problems at all but I am unsure on how to setup the folder when both apps are on the same domain.
I know that Laravel should be hosted below the public_html folder and have a symlink to the public folder for security purpose. But where should my vue app goes?
Second question:
When I save images from Vue(as I am creating a blog) the images are going to the Laravel store/images folder, so each time I want to show an article in my vue app, the API must each time request the content(text and images) from the Laravel API, is this fine? Will the Google bot be able to trigger the API request when requesting the content?(I actually never thought of this...)
Thank you so much!
I have a Laravel project, which should contain different Vue apps.
Some of these apps are quite-complex (stand-alone app.js file with its own components).
How can Laravel manage different vue apps, each one with its own app.js file and components?
One approach to solve this problem is to write vue apps as SEPARATE projects (using only frontend technologies) which connect with laravel using RESTful API.
This is in fact simple micro-services architecture (which include the hard separation between frontend and backend code). If you decide to do it, you will face CORS problem (but don't worry - you will find many solutions on internet e.g. this) because the vue app will be on different domain/subdomain that your RESTful laravel API.
Laravel support create restful API controllers - cmd:
php artisan make:controller API/MovieController --api --model=Movie
routing routes/api.php:
Route::group(['prefix'=>'v1'], function() {
Route::apiResource('movies', 'API\MovieController');
...
});
It is good to use for api authentication Laravel Passport (oauth2)
You should also build your separate vue applications using some modern frontend technologies like webpack, nmp (here is some example but you will probably find better)... long story - but this is good direction :)
I finished developing a Single Page Application using Vue Js in the front end to consume the APIs that I built with Laravel in the backend
I already deployed an old Laravel-only App in my shared hosting but now with all the new js files and node modules I have no idea what to do
I can't find any good tutorial or article, your help will be so much appreciated!
ps: I am using webpack to mix my SPA files