Laravel 9 vue js 3 Ckeditor 5 not showing - laravel

I want to install ckeditor to add blog posts to my Laravel 9 mix and vue js 3 project. If I do as the ckeditor says on his page, the ckeditor will not appear unless he makes a mistake
enter image description here
App.js
require('./bootstrap');
import { createApp } from "vue";
import App from './components/App';
import router from './router'
import store from "./store/store";
import AOS from 'aos'
import 'aos/dist/aos.css'
import CKEditor from '#ckeditor/ckeditor5-vue';
const app = createApp({});
app.AOS = new AOS.init();
app.component('my-app',App);
app.use(router)
app.use(store);
AOS.init();
app.mount('#wrapper');
createApp( { /* options */ } ).use( CKEditor ).mount( /* DOM element */ );
newBlog.vue file
<script setup>
import {mapGetters} from "vuex";
</script>
<template>
<div id="app">
<form #submit.prevent>
<div class="form-row mb-4">
<label>Blog adi</label>
<div class="form-group col-md-12">
<input class="form-control w-100" v-model="blogName">
</div>
</div>
<div class="form-row mb-4">
<label>Blog yazısı</label>
<div>
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
</div>
<button type="button" #click="send()" class="btn btn-primary mt-3">Redaktə et</button>
</form>
</div>
</template>
<script>
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '#ckeditor/ckeditor5-essentials/src/essentials';
import BoldPlugin from '#ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '#ckeditor/ckeditor5-basic-styles/src/italic';
import LinkPlugin from '#ckeditor/ckeditor5-link/src/link';
import ParagraphPlugin from '#ckeditor/ckeditor5-paragraph/src/paragraph';
export default {
name: 'app',
data() {
return {
blogName: '',
editor: ClassicEditor,
editorData: '<p>Content of the editor.</p>',
editorConfig: {
// The configuration of the editor.
}
};
}
}
</script>
Export
enter image description here

Related

How to configure Croppie for vue 3 in laravel 8?

In a vue page I added a ImageUpload component, following this tutorial: https://www.youtube.com/watch?v=kvNozA8M1HM
It works more or less. No errors, but it only shows my image and a ruler. I can zoom using the ruler, but it does not show boundaries, circle etc. It is completely different from the example in the tutorial...
It is buggy, so to say.
<template>
<div class="Image-Upload-wrapper Image-upload">
<p>
This is image upload wrapper component
</p>
<div id="croppie"> </div>
</div>
</template>
<script>
// uitleg over Croppie::https://www.youtube.com/watch?v=kvNozA8M1HM
import Croppie from 'croppie';
export default {
props:[
'imgUrl'
],
mounted(){
this.image = this.imgUrl // als component is mounted, this.image definieren, en daartmee croppie in..
this.setUpCroppie()
},
data(){
return{
image:null,
croppie:null
}
},
methods:{
setUpCroppie(){
let el = document.getElementById('croppie');
this.croppie = new Croppie(el, {
viewport:{width:200,height:200,type:'circle'},
boundary:{ width:220,height:220},
showZoomer:true,
enableOrientation: true
});
this.croppie.bind({
url:this.image
});
}
}
}
</script>
Is placed in parent as follows:
template>
<div>
<h2>Cards 1</h2>
<div class="form-group">
<input type="text" class="form-control" :placeholder="card.title" v-model="card.title">
</div>
<div class="form-group">
<textarea class="form-control" :placeholder="card.description" v-model="card.description">
</textarea>
</div>
<div id="preview" v-if="url" >
<h4> Preview</h4>
<ImageUpload :imgUrl="url"></ImageUpload>
<!-- <img class="img-circle" style="width:150px" :src="url" /> -->
</div>
<input type="file" v-on:change="onFileChange" ref="fileUpload" id="file_picture_input">
<button #click="editCard(currentSpelerCard)" class="btn btn-warning m-1" style="width:100px;color:black"> Save Card </button>
</div>
</template>
In my package.json I have:
"croppie": "^2.6.5",
in webpack mix I have:
mix.js('resources/js/app.js', 'public/js')
mix.vue();
mix.sass('resources/sass/app.scss', 'public/css');
I have a feeling that something is wrong with the installation of croppie.
Does anyone know what could be the problem here?
Googloing on I found the remark:
"#Since this package also depends on croppie.css you have to import it in your app.js import 'croppie/croppie.css'"
I added the following line to bootstrap.js:
import 'croppie/croppie.css';

Pass or Emit an event from child component to the parent component in Vue Js with Laravel

I'm trying to pass an event to the parent component from the child component. I'm new to this and stuck at it. Basically, it is a dashboard having just a side panel and displaying area. The displaying area is in the dashboard template itself without a separate component.
This is my code for the dashboard.vue
<template>
<app-layout title="Dashboard">
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Dashboard
</h2>
</template>
<div class="h-screen bg-white overflow-hidden shadow-xl grid grid-cols-5">
<click/>
<div>
{{msg}}
</div>
</div>
</app-layout>
</template>
<script>
import AppLayout from '#/Layouts/AppLayout.vue'
import click from '#/Components/click.vue'
export default {
components: {
AppLayout,
click,
},
data(){
return{
msg:'1'
}
},methods:{
addValue:function(){
this.msg++
}
}
}
</script>
And This is my click.vue component
<template>
<div>
<button v-on:click="add" class="border-solid font-semibold hover:bg-blue-600 hover:text-white border-b-2 w-full py-5" id="click">Click ME 1</button>
</div>
</template>
<script>
export default {
methods:{
add:function(){
this.$parent.$emit('addValue');
}
}}
</script>
I'm trying to trigger the addValue() in Dashboard.vue from Click.vue
You could use inject/provide pattern :
in root component :
methods:{
addValue:function(){
this.msg++
}
},
provide: function () {
return {
addValue: this.addValue
}
}
in grandchild component inject the method and run it from your method:
export default {
inject: ['addValue'],
methods:{
add:function(){
this.addValue();
}
}}

Module not found: Can't resolve 'swiper/css/components/navigation/navigation.scss' Nextjs

I am new in Nextjs I am using the swiper in my component but I am getting an error and pagination navigation and swiper CSS is not found this code working fine in Reactjs when I use this code in Nextjs I am getting an error how to import this CSS in Nextjs
enter
import React, { useState } from "react";
import LandingItem from "../landing-item/landing-items-component";
import styles from "./landing-items-preview-styles.module.scss";
import SwiperCore, { Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css/components/navigation/navigation.scss";
import "swiper/css/components/pagination/pagination.scss";
import "swiper/css/swiper.css";
function LandingItemsPreview({ otherProps: { id, items, name } }) {
return (
<div className={`${styles.landing_items_preview}`}>
<div className={`${styles.header}`}>
<h1 className={`${styles.title}`}>{`Top ${name}`}</h1>
<button className={`${styles.view_all}`}>View All</button>
</div>
<div className={`${styles.swiper_main_container}`}>
<span
disabled={isBeginning}
className={`${styles.custom_swiper_button} ${styles.skewed}`}
onClick={goback}
>
➜
</span>
<Swiper>
{items.map(({ id, ...otherProps }) => (
<SwiperSlide key={id} className={`${styles.TopRestaurant_slides}`}>
<LandingItem {...otherProps} />
</SwiperSlide>
))}
</Swiper>
<span
disabled={isEnd}
className={`${styles.custom_swiper_button}`}
onClick={goNext}
>
➜
</span>
</div>
</div>
);
}
export default LandingItemsPreview;
here
They are available in compiled format, try this:
import 'swiper/components/navigation/navigation.min.css';
Try importing "navigation.min.css" instead "navigation.scss"

Vue-Router + Vuetify does not display the command

I am trying to load a component with Vue-Router, besides loading the required URL it does not change what is being displayed. If I access the URL path manually it displays the component correctly. I am also using Laravel and because of this, I inserted the following line on web.php so Vue-Router can be responsible for handling the routes.
Route::get('/{any}', 'SinglePageController#index')->where('any', '.*');
Watch here the error (IMGUR - Gif):
App.js
import './bootstrap';
import Vue from 'vue';
import Vuetify from 'vuetify';
import axios from 'axios';
import VueCookie from 'vue-cookie';
import router from '#/js/routes.js';
import App from '#/js/views/App';
Vue.use(Vuetify);
Vue.use(VueCookie);
const app = new Vue({
el: '#app',
router,
render: h => h(App)
});
export default app;
routes.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '#/js/views/Home';
import About from '#/js/views/About';
import Exames from '#/js/views/Exames/Exames';
import checkAuthentication from '#/js/utils/check-authentication.js';
import getStaffData from '#/js/utils/get-staff-data.js';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/exames',
name: 'exames',
component: Exames
}
]
});
//router.beforeEach(checkAuthentication);
//router.beforeEach(getStaffData);
export default router;
Home.vue
<template>
<div>
<h1>Página de Início</h1>
</div>
</template>
Exames.vue
<template>
<div>
<v-layout d-flex align-start justify-start row fill-height>
<v-flex xs6 sm6>
<v-card>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
<div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color="orange">Share</v-btn>
<v-btn flat color="orange">Explore</v-btn>
</v-card-actions>
</v-card>
</v-flex>
<v-flex xs6 sm6>
<v-card>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
<div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color="orange">Share</v-btn>
<v-btn flat color="orange">Explore</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</div>
</template>
<script>
export default {
props: ['membro'],
data() {
return {
name: 'exames'
}
}
}
</script>
You have to load the components in a router-view, so that when route changes, the components load within that router-view component.
You can look at this codepen to see how to do that. Notice the <router-view></router-view> in Line 22

Bootstrap Datepicker with Angular2

I need to use Bootstrap Datepicker with Angular 2. So I created a component as follows
import {Component, ElementRef, OnInit} from '#angular/core';
declare var $: any;
#Component({
templateUrl: 'app/views/daily-reports.html'
})
export class DailyReportsComponent implements OnInit {
constructor(private elRef: ElementRef) {}
ngOnInit(): void {
$('#daily-reports').datetimepicker();
}
}
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='daily-reports'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
In my index.html file I have all the files needed - js libraries and css files but I get the error
TypeError: Cannot read property 'addClass' of undefined
When I try to use the same code without Angular I works correctly as usual. Is there a way to fix the problem or can anybody show me how to use this plugin in Angular2
You have to put that initialization in ngAfterViewInit, because the DOM is not rendered yet in ngOnInit, so the selector in your JQuery will not be found and thus return undefined.
ngAfterViewInit(): void {
$('#daily-reports').datetimepicker();
}
use declare var jQuery:any; then in ngAfterViewInit add:
jQuery(this.el.nativeElement).find('div[id="daily-reports"]').datetimepicker({format: 'LT'})

Resources