I've installed a new laravel 8 jetstream with inertia and trying to use tiptap for wysiwy but webpack is giving the error below:
WARNING in ./node_modules/tiptap/dist/tiptap.esm.js 111:4-21
export 'default' (imported as 'Vue') was not found in 'vue'
<template>
<app-layout>
<editor-content :editor="editor" />
</app-layout>
</template>
<script>
import AppLayout from "#/Layouts/AppLayout";
import { Editor, EditorContent } from 'tiptap'
export default {
components: {
AppLayout,
EditorContent
},
data() {
return {
editor: null,
};
},
mounted() {
this.editor = new Editor({
content: '<p>This is just a boring paragraph</p>',
})
},
};
</script>
Related
I am trying to integrate Stripe Checkout into my Laravel Vue.js application. I watched a tutorial on YouTube. However, I get the following error.
Vue Stripe will not work on an insecure host. Make sure that your site
is using TCP/SSL.
<template>
<div class="py-8 flex justify-center">
<stripe-checkout
ref="checkoutRef"
mode="payment"
:pk="publishableKey"
:sessionId="sessionId"
/>
<button class=" bg-blue-500 px-2 py-1 rounded text-white" #click="submit">Pay now!</button>
</div>
</template>
<script>
import { StripeCheckout } from "#vue-stripe/vue-stripe";
import axios from "axios";
export default {
components: {
StripeCheckout ,
},
data() {
return {
publishableKey: "pk_test_51KtYynFJTg08EEU2sYHLN0LKrnZTuJCazai8jmokQ2096V7IXYjX2XsdGi7xh5jOgSCz5nnn7YfJS5afTtEHRSxk00EUEcmhsj",
sessionId: null,
};
},
mounted() {
console.log("Component mounted.");
this.getSession()
},
methods: {
getSession() {
axios.get('getSession').then(res => {
this.sessionId = res.data.id
}).catch(err => {
});
},
submit () {
this.$refs.checkoutRef.redirectToCheckout();
}
}
};
</script>```
According to the docs you can register it as a plugin where you can define a testMode option to override the insecure host warning
import Vue from 'vue';
import { StripePlugin } from '#vue-stripe/vue-stripe';
const options = {
pk: process.env.STRIPE_PUBLISHABLE_KEY,
testMode: true, // Boolean. To override the insecure host warning
stripeAccount: process.env.STRIPE_ACCOUNT,
apiVersion: process.env.API_VERSION,
locale: process.env.LOCALE,
};
Vue.use(StripePlugin, options);
I am trying to use CKEditor 5 with my Inertia Application in Laravel. But after following the documentation I am getting below error.
index.vue file
<template>
<div id="app">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
</template>
<script>
import CKEditor from '#ckeditor/ckeditor5-vue';
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
export default {
name: 'app',
components: {
ckeditor: CKEditor.component
},
data() {
return {
editor: ClassicEditor,
editorData: '<p>Content of the editor.</p>',
editorConfig: {
// The configuration of the editor.
}
};
}
}
</script>
try vue#3.2.30 if you using Vue 3
Is it possible to use Typescript in Vue single file components (SFC) when using Laravel Mix?
If so, how should this be set up?
I'm currently using Laravel Mix 5.0, Typescript 3.7.5 and Vue 2.5.17.
I have a single file component written in Typescript, e.g. SingleFileComponent.vue:
<template>
<div>
<ul
v-for="item in items"
v-bind:key="item.id">
<li>{{ item.message }}</li>
</ul>
</div>
</template>
<script lang="ts">
import Axios from 'axios';
export default {
data() {
return {
items: [],
}
},
mounted() {
Axios.get('/api/get-stuff').then(res => {
this.items = res.data;
})
},
}
</script>
This is what I have configured in webpack.mix.js:
const mix = require('laravel-mix');
mix.ts('resources/js/app.ts', 'public/js')
.webpackConfig({
resolve: {
extensions: ["*", ".js", ".jsx", ".vue", ".ts", ".tsx"]
}
});
Running npm run watch results in the following error:
ERROR in /path-to-file/SingleFileComponent.vue.ts
[tsl] ERROR in /path-to-file/SingleFileComponent.vue.ts(21,12)
TS2339: Property 'items' does not exist on type '{ data(): { items: never[]; }; mounted(): void; }'.
When using SFC with Typescript you should extend:
<script lang="ts">
import Axios from 'axios';
import Vue from 'vue';
export default Vue.extend({
...
})
</script>
I'm making a sidebar that can have dynamic content, using vuex
So, for exaple, I have this app with a Sidebar.vue that can loads a DynamicContent.vue, how do I pass a prop to that DynamicContent.vue inside
app.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import store from './store'
import Sidebar from './components/Sidebar'
import DynamicContent from './components/DynamicContent.vue'
Vue.component('sidebar', Sidebar)
const app = new Vue({
el: '#app',
store,
data() {
return {
dynamicContent: DynamicContent
}
},
methods: {
toggleSidebar() {
this.$store.commit('toggleSidebar', dynamicContent)
}
}
})
Sidebar.vue
Notice: I can't pass my props throught that component tag cause the components can have differents props
<template>
<div>
<component :is="component" />
</div>
</template>
<script>
export default {
computed: {
component() {
return this.$store.state.sidebarComponent
}
}
}
</script>
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
sidebarOpen: false,
sidebarComponent: null
},
mutations: {
toggleSidebar(state, component) {
state.sidebarOpen = ! state.sidebarOpen
state.sidebarComponent = component
},
}
})
To dynamically bind props, you can use v-bind this way
<template>
<div>
<component :is="component" v-bind="componentProps"/>
</div>
</template>
<script>
export default {
computed: {
component() {
return this.$store.state.sidebarComponent
}
componentProps {
return { prop1: 'value', prop2: 123 }
}
},
}
</script>
v-bind takes an object and pass all properties in it as props to component.
I do not know what I'm doing wrong, but my router-view does not work.
I have an app based on Laravel 5.6 and I want to make views through vue.js.
Components "Navbar" and "Foot" are load correctly but I don't see "Home" component which should be load by in App.vue
Routing also does not work. When I type in the browser /about I get an error "Sorry, the page you are looking for could not be found."
Below my files:
App.vue
<template>
<div class="app">
<Navbar/>
<router-view></router-view>
<Foot/>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return{
}
}
}
</script>
Home.vue
<template>
<div class="home">
<h1>Home</h1>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
}
}
}
</script>
About.vue
<template>
<div class="about">
<h1>O nas</h1>
</div>
</template>
<script>
export default {
name: 'About',
data (){
return{
}
}
}
</script>
app.js
require('./bootstrap');
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
window.Vue = require('vue');
Vue.use(VueRouter);
Vue.use(Vuex);
let AppLayout = require('./components/App.vue');
// home tempalte
const Home = Vue.component('Home', require('./components/Home.vue'));
// About tempalte
const About = Vue.component('About', require('./components/About.vue'));
// register components
const Navbar = Vue.component('Navbar', require('./components/Navbar.vue'));
const Foot = Vue.component('Foot', require('./components/Foot.vue'));
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
name: 'About',
path: '/about',
component: About
}
];
const router = new VueRouter({ mode: 'history', routes: routes});
new Vue(
Vue.util.extend(
{ router },
AppLayout
)
).$mount('#app');
You need to teach laravel's router how to play along with vue's.
Check out this link: https://medium.com/#piethein/how-to-combine-vuejs-router-with-laravel-1226acd73ab0
You need to read around where it says:
Route::get('/vue/{vue_capture?}', function () {
return view('vue.index');
})->where('vue_capture', '[\/\w\.-]*');