I have crate two separate project, one in vuejs (with vue create project_name) and the other in laravel (with laravel new project_name). Now i want to send data from vuejs project to the laravel project. How can i do that?
You can use a library like axios or fetch in your vuejs app to make http requests to your laravel app
(Axios docs: https://github.com/axios/axios)
(Fetch docs: https://developer.mozilla.org/es/docs/Web/API/Fetch_API/Utilizando_Fetch)
I like axios
For example if you want to make a POST to your api you can do
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
or a GET
axios.get('/user?ID=12345')
axios.get and axios.post are async functions, so you have to use the inside an async function whit await or use callbacks
Related
I'm working on a Laravel project where all frontend is managed by vuejs.
So, I have all backend routes defined on:
routes/api.php
And the file: routes/web.php it has this only route:
Route::view('{all}', 'app')
->where('all', '^((?!api).)*')
->name('vue');
Giving all the responsability to vue.js.
So inside resources/js (vue side) I have the frontend routes defined, for example:
{
path: '/',
name: 'home',
component: home,
meta: {
auth: true,
}
},
{
path: '/invoices/show/:id',
name: 'invoices.show',
component: InvoicesShow,
meta: {
auth: true,
}
},
Now the problem:
I started trying to create some notifications.
So on the notification I have to put the link where the customer has to go, but this link is to the frontend... So in Laravel I cannot write the vue.js route. Well, that's the question, is it possible to write the named route of vue.js?
I'd like to define this link on a notification for example:
->action('View Invoice', route('invoices.show', $invoiceId));
But the named route "invoices.show" it doesn't exist on Laravel routes. It's defined on vuejs router, in: resources/js/router/routes.js
So it won't work.
Is possible to get the vuejs router by name?
For now, I find impossible to do this.
So I simply write the full url "hardcoded".
->action('View Invoice', route('vue', ['all' => "invoices/show/{$invoiceId}"]));
This resolves my problem, but I cannot use the vue.js named routes.
One of the dirty workarounds would be to leave the VueJs route as it is and to create a new identical "helper" route for Laravel in your routes/web.php file.
So your web.php would look like this:
Route::view('/invoices/show/{id}', 'app')->name('invoices.show');
//Here you can add additional "helpers" routes as needed
Route::view('{all}', 'app')
->where('all', '^((?!api).)*')
->name('vue');
In this case, VueJs would still work fine and you would be able to use route() helper function in your project but a disadvantage is that you would need to maintain two routes if there is any changes.
I'm building and application in Laravel and Vuejs where I'm having Laravel routes as below:
Route::get('/admin/{view?}', 'HomeController#admin')->where('view', '(.*)')->name('admin');
Route::get('/{view?}', 'HomeController#home')->where('view', '(.*)')->where('view', '!=', 'admin')->name('home');
I'm using Vue-router so I'm having routing in vuejs, and I'm using history mode. The problem is when I try to call /admin it generally calls HomeController#home method. even if I go deeper like /admin/dashboard it is calling the same home method. I want if admin prefix is being called then it should call HomeController#admin method.
its all okay for me please check this
Route::get('/admin/{view?}', function (){
dd('okay');
})->where('view', '(.*)')->name('admin');
Route::get('/{view?}', function(){
dd('okay1');
})->where('view', '(.*)')->name('home');
So try this
Route::get('/admin/{view?}', 'HomeController#admin')->where('view', '(.*)')->name('admin');
Route::get('/{view?}', 'HomeController#home')->where('view', '(.*)')->name('home');
I'm trying to add a chart using this Vue library. I added the dependencies into the Config file. The library asks us to use Vue.use(). But I get Vue is undefined. Any ideas?
https://vuejsexamples.com/lightweight-vue-component-for-drawing-pure-css-donut-charts/
Please use the App Level Enhancments
https://vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements
Belowe text is copied from Vuepress documentation:
App Level Enhancements
Since the VuePress app is a standard Vue app, you can apply app-level enhancements by creating a file .vuepress/enhanceApp.js, which will be imported into the app if it is present. The file should export default a hook function which will receive an object containing some app level values. You can use this hook to install additional Vue plugins, register global components, or add additional router hooks:
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
// ...apply enhancements to the app
}
I have a react application which is making ajax requests for data.
Since adding my components to React Storybook my components do not render data.
Instead of providing default prop types, is it possible to render the actual data being used for my components?
Can I import Axios into storybook and make requests or something along these lines?
Using moxios you can set url capturing regexes to wait for certain requests, and pass back whatever mock data you want to the api calls.
For example:
// Route like /user/{id}/settings/{somesettingname}
moxios.stubRequest(/user\/[0-9a-zA-Z]+\/settings\/[^\/]/, {
response: mockUserSettings,
status: 200,
});
Many laravel/vue tutorials use ajax calls to get the data. It seems that the SPA is completely isolated from Laravel. I.e. Laravel is just a data API and the vue app could also simply be hosted on a third party external server (e.g. AWS S3). Is this the recommended way, or should I rather use Laravel for Routing and have separate views that implement individual components and already included data instead of using a SPA?
For an SPA, I would recommend just going with the standard setup, which is Laravel on the webserver and Vue in the browser. To do this, install Laravel and Vue. AJAX communications from the browser to the server are accomplished with the Axios library which comes with Vue. Here is how to install Laravel and Vue router:
composer require laravel/ui
php artisan ui vue
npm install && npm run dev
npm install vue-router
npm run watch
From within a Vue component, using Axios to communicate with the server looks like the following. Also, in the following, the endpoint is defined in the Laravel > Routes > web.php:
methods: {
fetchMessages() {
let endpoint = `/channels/${this.activeChannel}/messages`;
axios.get(endpoint).then(resp => {
this.messages = resp.data.messages;
});
},
A Vue router is declared in the main js file. For instance, in app.js.
Here is what a Vue router looks like, and additional url paths would be added under "routes":
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
base: '/',
mode: 'history',
history: true,
routes: [
{
path: '/',
name: 'home',
component: PostComponent
},
],
});