I'm using vue3 and inertiaJs with Laravel8
I want to change the (TITLE of page) if I change the page
I checked in Inertia documentation this code but it doesn't work with me and the title of the page doesn't change
I installed vue-meta
metaInfo() {
return() {
title: “Home Page”,
}
}
return() is a property, not a function. :) So you should do it like this: return
// parent
metaInfo: {
meta: [{
vmid: 'description',
name: 'description',
content: 'my standard description',
}]
}
// child
metaInfo() {
return {
meta: [{
vmid: 'description',
name: 'description',
content: this.description,
}]
}
},
Learn more at this Vue doc
In "inertia-vue3", how do we know that "description" has changed?
import { Head } from '#inertiajs/inertia-vue3'
<Head>
<title>About - My app</title>
<meta head-key="description" name="description" content="This is a page specific description" />
</Head>
In the view-source, nothing can be understood !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>test</title>
<body>
</body>
</html>
As per v0.4.0 of Inertia, they now bundle their own inertia-head component you can use to add meta tags and update the title. There is no longer a need for vue-meta.
Simply add the following directly to your page components:
<inertia-head>
<title>Your page title</title>
<meta name="description" content="Your page description">
</inertia-head>
You can find more information in the change logs of v0.4.0.
Related
I am trying to make PWA of my Vue/Laravel app. The problem I am facing is my manifest.json file is not linked to my production build head. On my development it's working fine, browser is detecting the manifest.json but not on server.
I have linked the manifest.json to my app.blade.php file but on production server when I see the source code there is no manifest.json attached.
Here is my app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}"/>
<link rel="manifest" href="manifest.json" />
<title>{{env('APP_NAME')}}</title>
</head>
<body class="antialiased">
<div id="app"></div>
<script src="{{ asset('js/main.js') }}"></script>
</body>
</html>
My webpack.mix.js configs are
const mix = require('laravel-mix');
const path = require('path');
const WebpackPwaManifest = require('webpack-pwa-manifest');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.ts('resources/js/main.ts', 'public/js')
.vue({ version: 3 })
.postCss('resources/css/app.css', 'public/css', [
//
])
.sourceMaps();
mix.browserSync('http://localhost/');
mix.webpackConfig(module.exports = {
resolve: {
alias: {
'#/pages': path.resolve(__dirname, './resources/js/pages'),
'#/assets': path.resolve(__dirname, './resources/js/assets'),
},
},
});
mix.webpackConfig({
plugins: [
new WebpackManifestPlugin(),
new WebpackPwaManifest({
name: "DC",
short_name: "DC",
start_url: "/",
display: "standalone",
theme_color: "#004c97",
background_color: "#fff",
icons: [
{
"src": path.resolve(__dirname, './resources/js/assets/images/logo-pwa.png'),
"sizes": "256x256",
"type": "image/png"
}
],
id: "/#/login",
filename: 'manifest.json',
publicPath: '/',
basePath: '/public',
}),
],
});
mix.options({
hmrOptions: {
host: 'localhost',
port: 8000
}
})
Remember, it's working fine on development but not working on production.
Here is my production output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="irPGXqkRHKDYOBD1G0rPYsNp0Iwu881BIeCbmBfo"/>
<title>Abc</title>
</head>
<body class="antialiased">
<div id="app"></div>
<script src="https://xxxx/js/main.js"></script>
</body>
</html>
As you can see, there is no manifest file attached here
After spending hours i finally able to resolve this issue by replacing assets with mix in app.blade.php here is my latest file
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}"/>
<link rel="manifest" href="{{ mix('/pwa/manifest.json') }}" />
<title>{{env('APP_NAME')}}</title>
</head>
<body class="antialiased">
<div id="app"></div>
<script src="{{ mix('/js/main.js') }}"></script>
</body>
</html>
can`t render schema. got this error:
Unable to render this definition The provided definition does not
specify a valid version field.
Please indicate a valid Swagger or OpenAPI version field. Supported
version fields are swagger: "2.0" and those that match openapi: 3.0.n
(for example, openapi: 3.0.0).
Hi! i need to use my static schema, and trying to render this template(from django doc).
but it has not worked
urlpatterns = [
path('swagger/', TemplateView.as_view(
template_name='api_documentations/swagger.html',
), name='swagger'),
html template:
<!DOCTYPE html>
{% load static %}
<html>
<head>
<title>Swagger</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="//unpkg.com/swagger-ui-dist#3/swagger-ui.css" />
</head>
<body>
<div id="swagger-ui"></div>
<script src="//unpkg.com/swagger-ui-dist#3/swagger-ui-bundle.js"></script>
<script>
const ui = SwaggerUIBundle({
swagger: "2.1",
url: "{% static 'static-docs/api/openapi.schema' %}",
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIBundle.SwaggerUIStandalonePreset
],[enter image description here][1]
layout: "BaseLayout",
requestInterceptor: (request) => {
request.headers['X-CSRFToken'] = "{{ csrf_token }}"
return request;
}
})
</script>
</body>
</html>
Can anyone help me make translations working in laravel blades too?
I need to change/translate the contents of the title and description meta depending on the language being switched.
This is how the language changes in Vue:
<template>
<ul class='language-switcher'>
<li :class="{'active': language === 'de'}">
De
</li>
<li :class="{'active': language === 'en'}">
En
</li>
</ul>
</template>
<script>
import {loadLanguageAsync} from "laravel-vue-i18n";
export default {
name: "LanguageSwitcherComponent",
data() {
return {
language: 'en',
};
},
methods: {
switchLanguageTo(lang) {
// ...
loadLanguageAsync(lang);
// ...
},
},
}
</script>
In Vue, the translations work fine, but I need to translate title and description meta in index.balde.php as well.
<!DOCTYPE html>
<html lang="{{str_replace('_', '-', app()->getLocale())}}">
<head>
<title>{{ __("Site Title") }}</title>
<meta name="description" content="{{ __("Site Info") }}">
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{mix('css/app.css')}}">
</head>
<body>
<div id="app">
<index-component/>
</div>
<script src="{{mix('js/app.js')}}"></script>
</body>
</html>
Also, this is how configured i18n in app.js:
import {i18nVue} from 'laravel-vue-i18n';
// ...
app.use(i18nVue, {
lang: 'en',
resolve: lang => import(`../../lang/${lang}.json`),
});
Thanks!
Save site language in cookies and in web.php set locale from cookies.
Route::get('/{any}', function (Request $request) {
// Set locale
App::setLocale($request->cookie('site_language') ?: 'en');
return view('index');
})->where('any', '.*');
Note: Maybe will need to add cookie name in app/Http/Middleware/EncryptCookies.php in $except list to get cookie from the $request successfully.
I have faced a problem that ng-admin is not rendering inside simple ui-view.
Here is the code:
$stateProvider
.state('home', {
url: '/',
template: homeTemplate
})
.state('login', {
url: "/login",
template: loginTemplate,
controller: 'LoginController',
controllerAs: 'vm'
})
.state('register', {
url: "/register",
template: "<div>Register is under maintenance</div>",
})
;
And here is Html:
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Admin-tool</title>
<meta name="google" value="notranslate">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="shortcut icon" href="favicon.ico" />-->
</head>
<body ng-strict-di class="main-content">
<div id="content-body" class="content">
<div ui-view=""></div>
</div>
<pg-footer></pg-footer>
</body>
Also there is an info message
WARNING: Tried to load angular more than once.
Maybe this is the case? Could you please point me out why it doesn't even render ng-admin simple page?
In browser it just looks like:
<!-- uiView: -->
<div ui-view="" class="ng-scope"></div>
Well, ng-admin has it's own routing so it was needed to make login rout and default on which ng-admin initialize. If it's needed to make custom pages inside ng-admin you just need to specify that in your state like this: parent: 'ng-admin'
I have been struggling to submit a simple get request to google places api
https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&types=food&name=cruise&key=xxxx
I keep on getting an error:
XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8…ius=500&types=food&name=cruise&key=xxxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '8100' is therefore not allowed access.
I looked this up online and it has something to do with CORS but I havent been able to figure anything out. If someone could point me in the right direction that would be great.
thanks
I was able to call that url restfully using ionic.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="components/lib/ionic/css/ionic.css" rel="stylesheet" />
<script src="components/lib/ionic/js/ionic.bundle.js"></script>
<script src="components/lib/ionic/js/angular/angular-resource.js"></script>
<script type="text/javascript">
angular.module('myApp',
[
'ionic',
'ngResource'
])
.factory('GetData', function ($resource)
{
return {
getg: function ()
{
return $resource('https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&types=food&name=cruise&key=xxxx', null).get();
}
}
})
.controller('SomeController', function (GetData)
{
GetData.getg().$promise.then(
function (answer)
{
console.log(answer);
});
});
</script>
</head>
<body ng-app="myApp" ng-controller="SomeController"></body>
</html>
What worked for me was to install this addon:
cordova-plugin-whitelist
Console:
cordova plugin add cordova-plugin-whitelist