<title>Laravel</title>
I use following
/ In app.js
import VueMeta from 'vue-meta'
Vue.use(VueMeta)
// in vue file
<template>
<div>
</div>
</template>
<script>
export default {
metaInfo: { title: 'Dashboard' },
};
</script>
It's change document title, not actual title tag (Source Code).
i want to change title also in source-code.(Ctrl+U);
You can use
document.title = 'Dashboard'
Related
I have used this instruction from inertiajs official website to share user auth data and it works fine for all pages except those who doesn't directly rendered by Inertia::render() method.
I need to access user authentication data from a layout component named <Master> but I can't!
here is my structure/heirarchy:
- Vue/
- Pages/
- Home/
- Index.vue
- Layouts/
- Master.vue
- Header.vue
- Footer.vue
- App.js
here is my <Master> component:
<template>
<Head>
<title>My Title</title>
</Head>
<Header :user="user"/>
<slot/>
<Footer/>
</template>
<script>
import Header from './Header';
import Footer from './Footer';
import {Head} from '#inertiajs/inertia-vue3';
export default {
data() {
return {
user: this.auth.user,
}
},
props:{
auth: Object,
},
components: {
Header,
Footer,
Head,
}
}
</script>
You can use the $page property or the usePage() hook.
<Header :user="$page.props.auth.user" />
const user = computed(() => usePage().props.value.auth.user)
If you scroll down the the link you have given you will know it.
I am learning Vue and got stuck trying setup it as full front-end with Laravel, on my scenario I already have made an personal blog for test using Laravel with Blade engine and some components of Vue and seems work fine.
I am trying get on next level, removing Blade and letting Laravel as API backend and setup Vue as full front end with SSR, the basic setup works, I mean I can call Vue, render it using SSR with node or PHPv8, the problem I am having is on route systems, thinking as blade way I can't archive same result, on blade I use an default layout as master and import it for every post, page, blog, etc...
Example:
resources/views/layouts/master.blade
<!DOCTYPE html>
<html dir="ltr" lang="{{ app()->getLocale() }}">
<head>
#include('partials._head')
</head>
#if(View::hasSection('body')) {{-- Load Custom Body --}}
<body #section('body')>
#else
<body>
#endif
#yield('content')
#include ('partials._javascripts')
#section('scripts')
</body>
</html>
So I call a dynamic head per page / post, a dynamic content, an basic javascripts (bootstrap, vue, fontawesome, etc...) and custom 'scripts' per page / posts.
Using the librarie:
https://github.com/spatie/laravel-server-side-rendering
I can get SSR working with node or PHPv8, but the vue-route never call the desired page, my setup is:
resources/assets/js/app.js
import Vue from 'vue';
import App from './layouts/App';
import axios from 'axios';
import store from './store';
import router from './router';
import navbar from './components/navbar';
import posts from './components/posts';
import sidebar from './components/sidebar';
import footer from './components/footer';
import BlogIndex from './views/blog/BlogIndex';
export default new Vue({
store,
router,
navbar,
posts,
sidebar,
footer,
BlogIndex,
render: h => h(App),
});
resources/assets/js/entry-client.js
import app from './app';
app.$mount('#app');
resources/assets/js/entry-server.js
import app from './app';
import renderVueComponentToString from 'vue-server-renderer/basic';
app.$router.push(context.url);
renderVueComponentToString(app, (err, html) => {
if (err) {
throw new Error(err);
}
dispatch(html);
});
resources/assets/js/router.js
// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home';
import BlogIndex from './views/blog/BlogIndex';
Vue.use(VueRouter);
const routes = [
{ path: '/', name: 'home', component: Home },
{ path: '/blog', name: 'blog', component: BlogIndex },
];
export default new VueRouter({
mode: 'history',
routes,
});
resources/assets/js/store.js
import Vue from 'vue';
import uniq from 'lodash/uniq';
import Vuex, { Store } from 'vuex';
Vue.use(Vuex);
export default new Store({
state: {
},
getters: {
},
mutations: {
},
});
resources/assets/js/views/blog/BlogIndex.vue
<template>
<div class="container">
<navbar></navbar>
<posts></posts>
<sidebar></sidebar>
<footer></footer>
</div>
</template>
<script>
export default {
name: "BlogIndex",
components: {
}
}
</script>
<style scoped>
</style>
app/Http/Controllers/VueSSRController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\File;
use Illuminate\Routing\Route;
class VueSSRController extends Controller
{
public function __invoke()
{
return view('layouts.vue');
}
}
resources/views/layouts/vue.blade.php
<!DOCTYPE html>
<html dir="ltr" lang="{{ app()->getLocale() }}">
<head>
#section('extrajavascripts'){{ asset('js/scripts.min.js') }}#endsection
#include('partials._head')
</head>
#if(View::hasSection('body')) {{-- Load Custom Body --}}
<body #section('body')>
#else
<body>
#endif
{{-- Begin of Vue SSR --}}
{!! ssr('resources/assets/js/server_bundle.min.js')
// Share the packages with the server script through context
//->context('packages', $packages)
// If ssr fails, we need a container to render the app client-side
->fallback('<div id="app"></div>')
->render() !!}
{{-- End of Vue SSR --}}
#include ('partials._javascripts')
#section('scripts')
#show
</body>
</html>
/resources/assets/js/layouts/App.vue
<template>
<div id ="app">
{{ message }}
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
message: 'SSR working.'
}
}
}
</script>
<style scoped>
</style>
So SSR works fine, the problem is the resources/assets/js/router.js is not loading the resources/assets/js/views/blog/BlogIndex.vue, the url/blog works, but the component rendered is always the /resources/assets/js/layouts/App.vue.
Someone would point what I am missing setup please?
Thanks in advice!!!
You should place <router-view></router-view> where you want the router to load. I think in your case its below {{message}} in App.vue
please I try to make my first vuejs - laravel application,
and I get a trouble with layouts and assets, this is my code:
Here i try to detect the layout from route, it dosen't work very well, because when i refresh the page, it chage the main layout first and after go the layout needed
app.vue
<template>
<div>
<div v-if="$route.meta.layout == 'front'">
<frontLayout></frontLayout>
</div>
<div v-else-if="$route.meta.layout == 'admin'">
<adminLayout></adminLayout>
</div>
<div v-else>
<mainLayout></mainLayout>
</div>
</div>
</template>
<script>
let frontLayout = require('./layouts/frontLayout.vue');
let mainLayout = require('./layouts/mainLayout.vue');
import {mapState} from 'vuex'
export default {
components:{frontLayout,mainLayout},
computed: {
...mapState({
userStore: state => state.userStore
})
},
created(){
console.log('app vue')
}
}
</script>
For the asset after setting the webpack laravel-mix like this:
webpack.mix.js
mix.combine(['resources/assets/front/css/*','resources/assets/front/plugin-css/*','resources/assets/front/style.css'], 'public/css/front.css')
.options({
processCssUrls: false,
});
mix.combine(['resources/assets/front/script/*','resources/assets/front/plugin-script/*'], 'public/js/front.js')
.options({
processCssUrls: false,
});
I try to import the front.css file in the frontLayout.vue when it was loaded like this:
frontLayout.vue
<template></template>
<script>
export default {
}
</script>
<style scoped>
#import '../../../../public/css/front.css';
</style>
But it dosen't work always ! any help please. Thanks
How could I use ckeditor with Angular2 component?
Doing something like:
import {Component} from 'angular2/core'
#Component({
selector: 'e',
template: `
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
`
})
export class E {
}
and printing it in index.html like:
<html>
<head>
<title>Hello</title>
<script src="../ckeditor/ckeditor.js"></script>
<script src="../systemjs/dist/system.src.js"></script>
<script src="../es6-shim/es6-shim.js"></script>
<script src="../angular2/bundles/angular2-polyfills.js"></script>
<script src="../rxjs/bundles/Rx.js"></script>
<script src="../angular2/bundles/angular2.dev.js"></script>
<script src="../angular2/bundles/router.dev.js"></script>
<script src="../angular2/bundles/http.dev.js"></script>
<script src="http://fgnass.github.io/spin.js/spin.min.js"></script>
<script>
System.config({
packages: {
compiled: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('../compiled/boot')
.then(null, console.error.bind(console));
</script>
</head>
<body>
Hackathon incoming!
<e>Loading...</e>
</body>
</html>
doesn't work. It works good when I put all the textarea with script code in index.html but I really want to have it in component template. It's like the ckeditor doesn't see the textarea ID when it is in component.
How can I make ckeditor plugin working good with Angular2 component? Thank you
Don't add the script to your template. use this instead
import {Component} from 'angular2/core'
declare const window: any;
#Component({
selector: 'e',
template: `
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
`
})
export class E {
constructor(){}
ngOnInit(){
if(window.CKEDITOR) {
window.CKEDITOR.replace('editor1');
}
}
}
UPDATE:
Check angular2 lifecycle hooks, and since the components are javascript you can execute any script code from inside your component.
A better way,
implement a CKEDITOR component that will be used like this
<CKEditor [targetId]="editor1" [rows]="10" [cols]="80"> </CKEditor>
ckeditor.component.ts
import {Component, Input} from 'angular2/core';
declare const window: any;
#Component({
selector: 'CKEditor',
template: `
<textarea name="targetId" id="targetId" rows="rows" cols="cols">
This is my CKEditor component.
</textarea>
`
})
export class CKEditorComponent {
#Input() targetId;
#Input() rows = 10; //you can also give default values here
#Input() cols;
constructor(){}
ngOnInit(){
if(window.CKEDITOR) {
window.CKEDITOR.replace('editor1');
}
}
}
The best way,
Get the typescript definition file for CKEditor, I found it here.
Add it to your project, after that you will be able to use the library.
this is only for illustrating, not tested.
import * as CKEDITOR from 'CKEDITOR/PATH';
.
.
ngOnInit(){
CKEDITOR.replace( targetId );
}
I have just started trying out angular js and using the egghead.io videos. One of the samples is about routeProvider. I am using vs.net 2012 to run it but cant get it to display any of the templates or messages when I hit:
http://localhost/app.html/pizza
This is the sourcecode inside of app.html:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
// Create a new module
var app = angular.module("app", []);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: "app.html",
controller: "AppCtrl"
})
.when('/pizza', {
template: "yum"
})
});
app.controller("AppCtrl", function ($scope) {
$scope.model = {
message: "this is my app"
}
});
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app" ng-controller="AppCtrl">
</div>
Modified from JoeyP's post to make it work:
index.html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
// Create a new module
var app = angular.module("app", []);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: "app.html",
controller: "AppCtrl"
})
.when('/pizza', {
templateUrl: "yum.html" // there was a typo here in the OP
})
.otherwise( {
redirectTo: '/'
});
});
app.controller("AppCtrl", function ($scope) {
$scope.message= "this is my app";
});
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app">
<div ng-view></div>
</div>
app.html
<div>
Go get some pizza! {{message}}
</div>
yum.html
<p>
MMMM, pizza
more pizzaaaaaaaa
</p>
Note: The code need to be run on web-server (ex. Apache) to function.
app.html and yum.html are fetched by angular after the page has loaded. So in your example http://localhost/pizza should point to the page with the above code and yum.html (as well as app.html) should be located in the root of your project.
On load angular will download app.html if you hit "/" and yum.html if you hit "/pizza". Here's an example
index.html (excluding <html>,<head>,<body>, etc)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
// Create a new module
var app = angular.module("app", []);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: "app.html",
controller: "AppCtrl"
})
.when('/pizza', {
template: "yum.html" // there was a typo here in the OP
})
});
app.controller("AppCtrl", function ($scope) {
$scope.model = {
message: "this is my app"
}
});
</script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<div ng-app="app">
<div ng-view></div>
</div>
app.html
<div>
<p ng-bind="model.app"><p>
<a ng-href="/pizza">Go get some pizza!</a>
</div>
yum.html
<p>
MMMM, pizza
</p>
The ng-controller attribute isn't needed because you defined the controllers in the routes. You do need the ng-view attribute somewhere in the main html file so angular knows where to insert the template.
John from egghead.io really needs to update this section of his tutorial.
See this answer:
Failed to instantiate module [$injector:unpr] Unknown provider: $routeProvider
you need to add this dependency:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
var app = angular.module("app", ['ngRoute']);
P.S. template: "yum" is totally valid, as in template: "<p>yum</p>"
(JoeyP thinks you're trying to do templateUrl: "yum.html")