Arkadaşlar merhaba,
Laravel ile Vue kullanımını öğrenmek için aldığım bir kurs var. Proje üzerinde oynamalar yaparak yeni şeyler öğrenmeye çalışıyorum. meta tagları ve title için https://vue-meta.nuxtjs.org/ eklentisini kurdum.
Öncelikle özetlemem gerekirse;
app.js içerisine import edip Vue.use(VueMeta); ile aktif ettim.
Projede bir tane başlangıç sayfam bulunuyor welcome.blade.php;
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<div id="app">
<index></index>
</div>
</body>
</html>
Burada sadece CSS ve JS dosyaları var. div id app altında Index.Vue 'yu çağırıyorum.
Header-Footer gibi bölümler Index.Vue içerisinde yer alıyor. Content kısmında da <router-view> var. Tahmin edeceğiniz üzere oradan itibaren Vue-Router devralıyor.
Index.Vue;
<template>
<div>
<nav class="navbar navbar-expand-lg bg-white border-bottom navbar-light">
<router-link class="navbar-brand mr-auto" :to="{ name: 'home' }">
LaravelBnb
</router-link>
<ul class="navbar-nav">
<li class="nav-item">
<router-link class="nav-link" :to="{ name: 'basket' }">
Basket
<span v-if="itemsInBasket" class="badge badge-secondary">{{
itemsInBasket
}}</span>
</router-link>
</li>
<li class="nav-item" v-if="!isLoggedIn">
<router-link :to="{ name: 'register' }" class="nav-link"
>Register</router-link
>
</li>
<li class="nav-item" v-if="!isLoggedIn">
<router-link :to="{ name: 'login' }" class="nav-link"
>Login</router-link
>
</li>
<li class="nav-item" v-if="isLoggedIn">
<a href="#" class="nav-link" @click.prevent="logout">Logout</a>
</li>
</ul>
</nav>
<div class="container mt-4 mb-4 pr-4 pl-4">
<router-view></router-view>
</div>
</div>
</template>
devamında;
<script>
export default {
data() {
return {
title: null,
};
},
metaInfo() {
return {
name: "Index",
title: this.title,
titleTemplate: "%s",
meta: [
{ charset: "utf-8" },
{ name: "description", content: "test,laravel,vuejs" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
],
};
},
async created() {
//Burada settings tablomdan title verisini alıyorum.
this.title = (await axios.get(`api/settings/1`)).data.data;
},
};
</script>
Bu şekilde ilerliyorum. Diğer componentlerimde de title kullanıyorum dinamik olması için.
Sayfa içerisinde gezerken title'ların değiştiğini görebiliyorum. Ancak sayfanın kaynağını görüntüle dersem ne <title> etiketi ne de <meta> tagları göremiyorum. Sanırım welcome.blade.php'ye basamıyor. Bir işlem daha yapmam gerekiyor ya da bir yerleri yanlış yapıyorum.
Yardımınıza ihtiyacım var. 🙁
app.js ve routes.js dosya içeriğimi de ilave ediyorum belki de orada bir hatam vardır.
app.js;
require('./bootstrap');
import VueRouter from "vue-router";
import Vuex from 'vuex';
import router from "./routes";
import Index from "./Index";
import VueMeta from 'vue-meta';
import storeDefinition from "./store"; //vuex için
window.Vue = require('vue');
Vue.use(VueRouter);
Vue.use(Vuex);
Vue.use(VueMeta);
const store = new Vuex.Store(storeDefinition);
window.axios.interceptors.response.use(
response => {
return response;
},
error => {
if (401 === error.response.status) {
store.dispatch("logout");
}
return Promise.reject(error);
}
);
const app = new Vue({
el: '#app',
router: router(store),
store,
components: {
"index": Index
},
beforeCreate() {
this.$store.dispatch("loadStoredState");
this.$store.dispatch("loadUser");
}
});
routes.js:
import VueRouter from "vue-router";
import Bookables from "./bookables/Bookables";
import Bookable from "./bookable/Bookable";
import NotFound from "./shared/components/NotFound";
//bazı başka componentler, uzatmamak için eklemiyorum...
const routes = [
{
path: "/",
component: Bookables,
name: "home",
},
{
path: "/bookable/:id",
component: Bookable,
name: "bookable",
},
{
path: "*",
component: NotFound,
name: "notfound"
}
];
export default function router(store) {
const router = new VueRouter({
routes, // short for `routes: routes`
mode: "history", // url'de # işaretini kaldırır
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!isLoggedIn()) {
next({ name: "login" });
} else {
next();
}
} else if (to.matched.some(record => record.meta.redirectIfUserAuthenticated)) {
if (isLoggedIn()) {
next({ name: "home" });
} else {
next();
}
}else {
next();
}
});
return router;
};
