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
Related
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've a vuejs app builded with the latest vue-cli, the vuejs app runs ok with the development server and communicates with the laravel app, but now I'd prefer that laravel handle this static files...if I build the js files with yarn run build this generates me several files, I could add thems to my laravel homepage but I'm afraid that if in the future I make some change and build these files again, I could get different file names...
what is the best approach for this???...I've found several articles integrating vuejs and laravel but all these are using the vuejs tool incorporated with laravel
thanks so much guys
I have integrated real chat system develop from VUE JS in my project developed in Laravel framework.
All Vue components need to be compiled down to JavaScript locally. Laravel does that automatically out of the box and you end up with a single static asset app.js. You need to use npm -command to do that see Laravel documentation for details. Then you just deploy single static app.js with you code.
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"
Me and my co-worker both are freshers and I'm doing the front-end using VueJS and he is doing back-end using Laravel.
But How do we connect both back-end and front-end to deploy the final product?
We are struggling to put VueJS project files inside the laravel project files.
We don't have idea where to put main.js, where to put routers.js store.js App.vue inside the laravel
Install Vue Js inside Laravel Project using npm,Then in your resource/assets foleder you will see the app.js, vue component. Then compile it, laravel mix will place your app.js file inside public/js/app.js. Then include it in view file.
I asked this question when I start my career as a junior software engineer. Now I saw this again randomly. We had no idea how to connect back-end and the front-end. But eventually we learned we are developing a restAPI so we host back-end and front-end separately as two projects and connect them using the restAPI. Back-end and the front-end was two identical projects. =)