I have an application already working with codeigniter and jquery. Both technologies with which I am very familiar.Recently my application has grown too much and my frontend has started to get a little disorganized, with very large files and difficult to maintain...In that time I started to study vue to implement in my project because it seems to work well with this concept of web components. My doubt is about merge the architectures that both frameworks (Vue and codeigniter) already have.
This is the structure of a vue application.
- node_modules
- src
components
App.vue
main.js
- package.json
- webpack.config.js
- index.html
And this is the codeigniter structure.
- config
- controllers
- system
- models
- views
- node_modules
- index.php
My idea is to create components in the vue to use them in my codeigniter views and my questions are:
What is the correct way to work with these architectures together?
Where do I put the vue files? I thought about putting it in the codeginiter's views directory because it seemed more logical since the vue will work in the visualization layer but I don't know if this is correct.
i believe i'm a little confused because i'm just starting with vue :)
If anyone can help, I appreciate it! \o/
Related
I currently have a Laravel Spark website running which employs Vue 2 internally.
I am now following a Vue course for an addition to my site.
I finished 20% of the course, it covered some Vue basics and important tools like
Webpack,Babel, SASS, PostCSS, ESLint and Vue CLI. I would think it would be possible to have these tools create the final javascript/css output which could be loaded into a dedicated Laravel blade page. So ideally, I would like to develop this new Vue website separately, and just plug it into the existing Laravel Spark site without having to worry about breaking things on the Laravel Spark side. Would this be possible?
I have an existing laravel project and am looking to change only one part of the site to use Vue for the views. What is the best approach here because most of the info I've seen on Laravel + Vue is how to start a project from scratch but this would be an existing project. Please, someone, suggest me a tutorial for this. Thank you.
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 :)
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. =)
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