I'm using Vue 2.6.12, Laravel and Inertia.
When using vue-meta to alter the meta title it displays 'undefined' for a split second when loading any page.
Im using Inertia, so the routing is on Laravels side and uses Inertia to pass the Vue component name and data to the frontend.
//app.js
new Vue({
metaInfo: {
titleTemplate: 'Inertia: %s'
},
render: h => h(App, {
props: {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: name => require(`./Pages/${name}`).default,
},
}),
}).$mount(el)
//Index.vue
export default {
metaInfo: {
title: 'User list'
}
}
It generally works, but it seems to stop working while Inertia requests are being processed / recieved / sent.
How do I prevent this?
what I understood that you want to load and manipulate metadata of the html page.
This cannot be manipulated unless you create a slot in the header, or place a prop so that each time you pass parameters to it it changes, with a layout.!
the most ideal thing would be that you use it inside the router:
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: {
title: 'Home Page - Example App',
metaTags: [
{
name: 'description',
content: 'The home page of our example app.'
},
{
property: 'og:description',
content: 'The home page of our example app.'
}
]
}
}
i dont expert in english.! will it really help
enter link description here
Related
error image
Hi, I am working on Vue js and my all route links working fine but when I want to add a product this error show on the console, update and delete product functionality working fine. There is some problem here when adding product "public" is included in the URL as shown in error. Does someone know about this type of error and solution?
editProduct() {
this.form.put((`/auth/products/${this.form.id}`))
.then(response => {
$('#addNew').modal('hide');
Toast.fire({
icon: 'success',
title: 'Product updated successfully'
});
this.getResults();
});
},
addProduct() {
this.form.post('/auth/products/')
.then(response => {
$('#addNew').modal('hide');
Toast.fire({
icon: 'success',
title: 'Product added successfully'
});
localStorage.setItem('productCount', response.data.products);
this.$emit('loggedIn');
this.products.data.push(response.data.data);
});
},
Above code snippet, edit product working fine but add product throw mixed content error.
Edit
I'm using https://github.com/hypery2k/nativescript-urlhandler to open a deep link within my app - using NativeScript vue, and vuex. It seems that in order to get at the methods needed to do routing [$navigateTo etc] this plugin needs to be set up slightly differently from the examples given in docs.
import Vue from "nativescript-vue";
import Vuex from "vuex";
Vue.use(Vuex);
import { handleOpenURL } from 'nativescript-urlhandler';
new Vue({
mounted() {
handleOpenURL( (appURL) => {
console.log(appURL)
// Settings is the variable that equals the component - in this case settings.
this.$navigateTo(Settings);
});
},
render: h => h("frame", [h(Home)]),
store: ccStore
}).$start();
handleOpenURL needs to be called within Mounted - then you can parse out the appURL and reference the page (component) that you wish to navigate to. I have been advised against calling handleOpenURL from within router - but I'm not sure why, and it works without error - and I have access to the methods for routing... so if anyone knows if this is a bad idea - please let me know :) Thanks!
All the stuff below that I wrote before has probably confused things - I'm referencing components within my vuex store to make them easily available from the router.
This is based on a solution by https://github.com/Spacarar - it can be found here: https://github.com/geodav-tech/vue-nativescript-router-example. It's a great solution because you don't have to include every single component within each component to use in navigation - it gives an almost vue router like experience.
I'm using https://github.com/hypery2k/nativescript-urlhandler to open a deep link within my app - however, I'm having problems opening the link.
In my app.js file, I have the following:
import Vue from "nativescript-vue";
import Vuex from "vuex";
Vue.use(Vuex);
....
import { handleOpenURL } from 'nativescript-urlhandler';
import ccStore from './store/store';
handleOpenURL(function(appURL) {
// I have hardwired 'Settings' in for testing purposes - but this would be the appURL
ccStore.dispatch('openAppURL', 'Settings');
});
....
new Vue({
render: h => h("frame", [h(Home)]),
store: ccStore
}).$start();
I'm storing the route state within vuex, and have various methods which work (clicking on a link loads the component). However, handleOpenURL exists outside of vue... so I've had to access vuex directly from within the handleOpenURL method. I've created an action specifically for this case - openAppURL.. it does exactly the same thing as my other methods (although I've consolidated it).
When clicking on an app link, I am NOT taken to the page within the app. I have put a console log within openAppURL and can see it is being called, and the correct route object is returned... it just doesn't open the page. The SetTimeOut is used because nextTick isn't available from within vuex.
I am at a loss on how to get the page to appear...
const ccStore = new Vuex.Store({
state: {
user: {
authToken: null,
refreshToken: null,
},
routes: [
{
name: "Home",
component: Home
},
{
name: "Log In",
component: Login
},
...
],
currentRoute: {
//INITIALIZE THIS WITH YOUR HOME PAGE
name: "Home",
component: Home //COMPONENT
},
history: [],
},
mutations: {
navigateTo(state, newRoute, options) {
state.history.push({
route: newRoute,
options
});
},
},
actions: {
openAppURL({state, commit}, routeName ) {
const URL = state.routes[state.routes.map( (route) => {
return route.name;
}).indexOf(routeName)];
return setTimeout(() => {
commit('navigateTo', URL, { animated: false, clearHistory: true });
}, 10000);
},
....
}
etc....
I have been advised to post my findings as the answer and mark it as correct. In order to use nativescript-urlhandler with vue, you must initialise the handler from within vue's mounted life cycle hook. Please see above for greater detail.
import Vue from "nativescript-vue";
import Vuex from "vuex";
Vue.use(Vuex);
import Settings from "~/components/Settings";
import { handleOpenURL } from 'nativescript-urlhandler';
new Vue({
mounted() {
handleOpenURL( (appURL) => {
console.log(appURL) // here you can get your appURL path etc and map it to a component... eg path === 'Settings. In this example I've just hardwired it in.
this.$navigateTo(Settings);
});
},
render: h => h("frame", [h(Home)]),
store: ccStore
}).$start();
I build an application. I have a header with the title of my page. Currently, I use view-router to define my titles.
{
path: '/events',
name: 'events',
component: Events,
meta: {
title: 'Liste des événements'
}
}
And in my blade view, in my header.blade.php I'm doing this to display the title
<h2 class="header__title title-header">
#{{ $route.meta.title }}
</h2>
It work BUT when I have a dynamic data, necessarily, it does not work. For example, when I post a post, how can I do to earn my title?
{
path: '/events/:id',
component: Event,
name: 'Event',
meta: {
title: 'my dynamic title',
page: 'event',
},
How to recover the title of the post page? I have the name of the post in my post, but I can not access it from my header ...
I do not have access to the other components. These are components coming from element-ui.
Thank you in advance
In your router, before export default router you can add
router.beforeEach((toRoute, fromRoute, next) => {
window.document.title = toRoute.meta && toRoute.meta.title ? toRoute.meta.title : 'Home';
next();
})
This will read the meta title if it exists and it will update the page title.
Or you can add it like this
const router = new Router({
beforeEach(toRoute, fromRoute, next) {
window.document.title = toRoute.meta && toRoute.meta.title ? toRoute.meta.title : 'Home';
next();
},
routes: [
...
]
})
Don't forget to change the default title value from Home to something else - maybe name of your project
I have a laravel + vue app. I've created a vue spa application for a particular page called shop. In this shop, I have 3 sub pages which is about, products and contact.
routes.php
Route::get('/shop/{slug}/{vue_capture?}', 'ShopController#show')->where('vue_capture', '[\/\w\.-]*');
vue-router.js
export const routes = [
{ path: '/', component: Home, name: 'home',
children: [
{
path: '/',
name: 'about',
component: About
},
{
path: '/products',
name: 'products',
component: Product
},
{
path: '/contact',
name: 'contact',
component: Contact
}
]
},
];
So for example I go to domain.com/shop/joe-shop, what is the best practice to extract the slug and use it in my vue application so I can make http requests with slug parameter to server? Thank you
note: I'm also using vuex state management in my app
var slug = window.location.pathname.replace(/^\/shop\/([^\/]+)(?:\/.*)?/i,'$1');
Note:
With your current set-up, you would need to set the base property in your vue-router config to behave properly.
new Router({
base: window.location.pathname.replace(/^(\/shop\/[^\/]+).*/i,'$1'),
mode: 'history',
routes: ...
})
I am Using Laravel 5.5 and Vue.js 2.0
When i open example.com and click on Display Items then this url triggered example.com/items
and here are results
and When i open directly this url example.com/items it shows me only json response that i am getting from Laravel without creating any view in html (Vue.js).
See Below:
How Can I Get Exact Results in Browser by Visiting Direct Urls like example.com/items without visiting example.com first.
Updated
Here is My Vue routes.js File
import Example from './components/ExampleComponent.vue'
import CreateItem from './components/CreateItem.vue'
import DisplayItem from './components/DisplayItem.vue'
import EditItem from './components/EditItem.vue'
export const routes = [
{ name: 'Example', path: '/', component: Example },
{ name: 'CreateItem', path: '/items/create', component: CreateItem },
{ name: 'DisplayItem', path: '/items', component: DisplayItem },
{ name: 'EditItem', path: '/items/:id/edit', component: EditItem }
];
Getting Response From Laravel Like This
$items = Items::all();
// dd($items);
return response()->json($items);
DisplayItems.vue File Vue.js Code
<script>
export default {
data(){
return{ items: [] }
},
created: function()
{
this.fetchItems();
},
methods: {
fetchItems()
{
this.axios.get('/items').
then(response => {
this.items = response.data;
});
},
deleteItem(id)
{
let uri = '/items/'+id;
this.items.splice(id, 1);
this.axios.delete(uri);
}
}
}
</script>
Laravel is returning a JsonResponse from the route /items, hence why you see JSON in the browser. Vue binds the JSON to dom elements.
You would need to modify the route to /items so that it returns JSON if $request->wantsJson() and a regular Response if non ajax.
[BEHAVIOUR]
laravel have it's own server with routes.
When you trying to refresh custom Vue.js route, it shows overrides Vue.js routes with laravel route and shows you only JSON response.
[SOLUTION]
You should create Vue.js application and Use laravel-echo or laravel broadcasting and use laravel api.
Now make each request from Vue to direct API and Get Response.