I'm actually trying to build a SPA (single page application) with Lumen as PHP framework and Vue.js as Javascript framework. The reason I use Lumen is because I provide some API that are not available within the SPA. I'm using vue-router to route all my page within the SPA. My question here is: is this possible to call a Lumen controller and get the result (blade vue) into a component for Vue.js?
I've searched the entire web for some help about my issue but, since I am not very used to code with vue.js, I didn't found what I need.
Here's what my app.js look for the moment:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const Foo = {
template: '<div>foo</div>'
}
const Bar = {
template: '<div><span>bar</span></div>'
}
const router = new VueRouter({
mode: 'history',
base: '/',
routes: [
{
path: '/foo',
component: Foo
},
{
path: '/bar',
component: Bar
}
]
});
new Vue({router}).$mount('#app');
But actually, I really want something like that:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
base: '/',
routes: [
{
path: '/foo',
component: './user/' // Calling controller expo as GET method (default action would be index()) and retreiving the blade vue for the vue.js component
},
{
path: '/bar',
component: './expo/' // Calling controller expo as GET method (default action would be index()) and retreiving the blade vue for the vue.js component
}
]
});
new Vue({router}).$mount('#app');
Thank you for your help. If you have any other solution for my problem, I'll be happy to hear them. I don't mind using other PHP framework or Javascript framework but, I this is possible with Lumen and Vue, I still wish to continue with them.
Related
I`m developing locally SPA application using Vuejs V2 in Laravel V8 framework.
My routes/web.php file have this codes:
Route::group(['prefix' => 'admin'], function () {
Voyager::routes();
});
//for disallow accessing route from anywhere alse than api
Route::get('/{any?}', function () {
return view('welcome');
})->where('any', '^(?!api\/)[\/\w\.\,-]*');
Auth::routes();
Here is my routes.js file inside resources/js folder
import VueRouter from "vue-router";
const routes = [
{
path: "*",
component: require("./components/PageNotFound").default,
name: "PageNotFound"
},
{
path: "/",
component: require("./components/Home").default,
name: "home"
},
// other routes
];
const router = new VueRouter({
mode: "history",
linkActiveClass: "active",
routes
});
export default router;
My problem is that i cant access Voyager http://127.0.0.1:8000/admin route in browser and redirects me to home page!
My Voyager installed successfully and before installing that i was developing frontend features so i have a lot routes in my routes.js file.
My question is how i can except Voyager admin group route in web.php or any other solutions maybe?!
I solved the problem by stopping serve then start that, worked for me and i can now see admin panel.
Hi I start using vuejs2 with project based on laravel backend
in my vuejs2, I did this code in the file routes.js
export default new VueRouter({
routes: [{
path: '/test',
component: Test
},
{
path: '/settings',
component: Settings
},
// users
{
path: '/users/create',
component: Create
},
// end users
],
});
Now in the line { path: '/users/create', component: Create}, I'm wondering how could I go to controller first and the controller redirect me to the component
like in laravel first think I write in route.php and calling a function in the controller and the controller redirect me to the view vile
what I found that's from the route I go to the component
but I need to do things before redirecting me to the component
thanks a lot.
. There is a guard available with VueRouter to perform checks. It is called BeforeEach(). What this will do is before resolving the next request in the pipeline it will check for the conditions to be satisfied.
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
if(some_condition){
next();
} else if(some_error){
next('/'); //rerouting
}
})
You can check this documentation : https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards
Here you can push the route you want to include in the pipeline using next() and
change it according to your conditions.
Deploy a Laravel and Vue application using Vue Router, but the components are not mounted on my div with id app, what could be happening?
The host is a shared hosting, the Laravel application is in a project folder
I have defined my APP_URL and ASSET_URL variables to my mydomain.com/project/
On Vue Router routes the starting point is /admin
const routes = [
{
path: '/admin',
children: [
...]
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes
})
The index file of the public folder is fine, in the first instance I show the login and it is displayed correctly, it validates the user, login and everything, but when I log in from the backend I redirect to the path admin is where my vue router acts.
What may be happening, I tried everything, to start the path with / on my vue router routes, but I am not successful.
I do not get any type of error in console or in the log of laravel
Edit
new Vue({
el: '#app',
store,
router,
render: h => h(App)
});
My guess is you missed to set the URL offset/ base.
Add base: "/project/" to the router options
Further readings
I have my VueJS app running. It is working fine but the only issue is that when I try to refresh the second or third level routing pages, it shows me an error message in the console, stating:
Failed to load resource: the server responded with a status of 404 ()
For eg.,
http://localhost:8080 renders me home page. No issue on refreshing.
http://localhost:8080/details renders details page. No issue on refreshing.
http://localhost:8080/details/users renders users page. On refreshing, it errors out.
I also have similar links defined for http://localhost:8080/details/assets and http://localhost:8080/details/groups which all errors out on page refresh.
Here is the code for main.js:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import { routes } from './routes';
Vue.use(VueRouter);
//Vue.config.productionTip = false
const router = new VueRouter({
mode: 'history',
routes
});
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
new Vue(Vue.util.extend({ router }, App)).$mount('#app');
and for routes.js:
import Home from './components/summary.vue'
import Details from './components/details/details.vue'
import Users from './components/details/users/users.vue'
import Assets from './components/details/assets/assets.vue'
import Groups from './components/details/groups/groups.vue'
export const routes = [
{ path: '/', component: Home},
{ path: '/details', component: Details},
{path: '/details/users', component: Users},
{path: '/details/groups', component: Groups},
{path: '/details/assets', component: Assets}
];
Any idea on how to fix this issue?
As is described in official document of vue-router
To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload
So navigating only in front end will not send request to back end, which is your spring boot application (you can see this from network traffic)
However, when you refresh your page, the request is sent directly to back end, which results the 404 error.
To fix your problem, one option could be setting a default 404 page to index.html which is suggested here
#Component
public class WebConfiguration implements EmbeddedServletContainerCustomizer {
#Override
public void customize(ConfigurableEmbeddedServletContainer configurableEmbeddedServletContainer) {
configurableEmbeddedServletContainer.addErrorPages(new ErrorPage(HttpStatus.NOT_FOUND, "/index.html"));
}
}
Hope it works for you!
I have an off-canvas menu that gets drawn in once a Vue route is clicked using jQuery, like so:
$('.order-drawer').show();
$('body').toggleClass( 'order-drawer-open' );
My route is very simple and is displayed as follows:
<router-link to="/order" exact class="order-drawer-toggler">
<a>Order Now</a>
</router-link>
<router-view></router-view>
Now, how can I make sure that when http://test.dev/test/#/order is viewed in the browser, that then my jQuery calls are getting executed? How can I call a function onload of a route view?
Edit:
My routes file looks as follows:
import VueRouter from 'vue-router';
let routes = [
{
path: '/order',
component: require('./views/Order.vue')
}
];
export default new VueRouter({
routes
});
You should allow your routing to drive your component and in that component, drive the jQuery behavior.
import VueRouter from 'vue-router';
let routes = [
{
path: '/order',
component: require('./views/Order.vue')
}
];
export default new VueRouter({
routes
});
Order.vue
export default {
mounted() {
$('.order-drawer').show();
$('body').toggleClass( 'order-drawer-open' );
}
}
When the component is created and mounted, it will show the drawer. There is nothing more you need to do. When vue-router routes TO the route, it will create and mount the component and your jQuery functions will be called.