I have the Laravel/Inertia app and I use VueSweetAlert2 imported globally in app.js.
It works well on every component. But now, I want to use on the component and I can't find working solution for sweetalert. I've tried several ways, but sweetalert still doesn't work.
I tried:
const swal = inject($swal),
Import VueSweetAlert2 from 'vue-sweetalert2';
Import Swal from 'vue-sweetalert2';
Import swal from 'vue-sweetalert2';
and some other ways.
How can I use SweetAlert in <script setup>???
Thanks. Pato
<script setup>
import { inject } from 'vue'
const swal = inject('$swal')
function showDialog(event) {
swal.fire({
icon: 'success',
title: 'done',
showConfirmButton: false,
timer: 1500
});
}
</script>
Reference from
calling SweetAlert2 inside Async method in VUE 3
Related
I am creating a Laravel project which embed many Vue components (using webpack+mix.js).
-In app.js I have:
import './bootstrap';
require('#fortawesome/fontawesome-free/js/all.js');
import Vue from "vue";
import router from './Router'
import store from './Store/index'
import vuetify from './vuetify.js'
import 'vuetify/dist/vuetify.min.css'
window.Vuetify = require('vuetify');
Vue.use(vuetify);
//import cartComponent from "./components/cartComponent";
// import cart from "./components/Cart";
import 'vuetify/dist/vuetify.min.css'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
import BTabs from 'bootstrap-vue'
import datePicker from "vue-bootstrap-datetimepicker";
//
Vue.use(datePicker);
Vue.use(BTabs)
const opts = {}
const my_components = document.getElementsByClassName("my-component-class-wrapper");
for (var i = 0; i <= my_components.length+1; i++) {
new Vue({
el: '#app' + i,
vuetify, //not all pages require it !
store, // *********************now store is shared between all the instances
router,
// opts,
components: {
cartComponent: () => import(/* webpackPrefetch: true */"./components/cartComponent"),
addToCart: () => import('./components/addToCart'), //in productDetail: <add-to-cart>
//cartComponent, //cart icon in navbar
cart: () => import('./components/Cart'),//cartDetails page
info: () => import('./components/Info') //info page
},
data: {},
async created() { //if removed the cart icon will disapear
store.dispatch('fetchProducts').then(_ => { //execute fetchProducts in vuex.
}).catch((error) => console.log(error))
},
validations: {}
});
}
I am using looping, so I can share one store between elements.
The problem is the slowness of the webpages to finish loading. And I discovered that #app0,#app1, .etc. are All carried to every page I visit, getting a message saying:Cannot find element: #app1,#app2,...
besides, not all the pages are using vuetify; another point, I don't need to fetch all the products in every page (async created()).
Is there a way to fetch elements on demand depending on the page I visit ? maybe that will solve the slowness of the pages.
The way the vue component are embedded in pages are :
-page1.blade.php :
<body>
<div id="app0" class="my-component-class-wrapper">
<info></info>
</div>
<script defer src="{{ mix('js/app.js') }}"></script>
</body>
-page2.blade.php:
<body>
<div id="app1" class="my-component-class-wrapper">
<add-to-cart></add-to-cart>
</div>
<script defer src="{{ mix('js/app.js') }}"></script>
</body>
I'm pretty new to Inertia (I have enough experience with Laravel), so I'm writting a toy SPA application. I learn that I must use the <Link ...> component instead of <a ...> to get the SPA behaivour. Problem is that I have to import the Link component on every other component that'll use links.
So, if I have a Page, I should do something like this:
<template>
...
<Link href="/about" class="...">
About Page
</Link>
...
</template>
<script>
import { Head, Link } from "#inertiajs/inertia-vue3";
export default {
components: {
Head,
Link,
},
...
};
</script>
And this works, but I think it's quite unefficient, boresome and so to have to import the Head and Link components for every page, after all a Link is the most common element on a page other than plan text.
Here https://inertiajs.com/releases/inertia-vue3-0.5.0-2021-07-13 in the documentation says you can register Link and Head components globally, so my app.js code looks like:
require("./bootstrap");
import { createApp, h } from "vue";
import { createInertiaApp } from "#inertiajs/inertia-vue3";
import { InertiaProgress } from "#inertiajs/progress";
import { Head, Link } from "#inertiajs/inertia-vue3";
const appName =
window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
createApp({ render: () => h(app, props) })
.use(plugin)
.component("InertiaHead", Head)
.component("InertiaLink", Link)
.mixin({ methods: { route } })
.mount(el);
},
});
As the documentation says, but this does nothing. When I comment the import ... and components section on my page component. It doesn't throw an error, but it doesn't display anything, not even the text.
Any idea?
You have registered your components as "InertiaLink" and "InertiaHead". If you do this, you must also name them that way in the vue files.
app.js
vue file
I'm trying to use Vuetify in Storybook with costume setup. The .Storybook/config.js looks like:
import { configure, addDecorator } from '#storybook/vue';
import 'vuetify/dist/vuetify.css';
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify, {
theme: {
dark: {
primaryTypColor: '#232B2B',
productCardTitle: '#7E7F80'
},
light: {
primaryTypColor: '#232B2B',
productCardTitle: '#7E7F80'
},
},
});
addDecorator(() => ({
template: '<v-app><story/></v-app>',
}));
configure(require.context('../stories', true, /\.stories\.js$/), module);
I'm getting the error: undefined is not an object (evaluating 'this.$vuetify.theme.dark') why is that?
It is because you haven't injected the global vuetify object in the Vue.js context. You can do so with a decorator.
In your example it looks like you only need to add the Vuetify that you imported to the addDecorator function as a parameter.
A complete example for storybook versions below 6, here is how:
import Vue from 'vue';
import vuetify from '#plugins/vuetify'
Vue.use(vuetify)
addDecorator(() => ({
template: '<v-app><story/></v-app>',
vuetify,
}));
For storybook version 6:
import vuetify from '#plugins/vuetify'
import Vue from 'vue'
Vue.use(vuetify)
export const decorators = [
() => ({
template: '<v-app><story/></v-app>',
vuetify
}),
]
I am trying to use vue plugins but everytime I do I always get an Unexpected Identifier on the import line. Any suggestions?
HTML
<div id="content">
<h1>#{{ message }}</h1>
<v-select :value.sync="selected" :options="options"></v-select>
</div>
JS
new Vue({
el: '#content',
data: {
message: 'Hello Worldy'
},
import vSelect from "vue-select"
export default {
components: {vSelect},
data() {
return {
selected: null,
options: ['foo','bar','baz']
}
}
}
});
You can't import from where you're trying to
import vSelect from "vue-select"
new Vue({
el: '#content',
components: {
vSelect: vSelect
}
});
and then do the rest of it inside your component definition
Just in case another person encounter this same error sign in the console when using vue. As for me in my case, the import script was automatically created for one of the components I called in my Laravel blade template (by PhpStorm).
The importation is recommended to be called in the Js file where the instance of Vue is made, because of the need to compile import syntax of ES6 to ES5. See: https://medium.com/#thejasonfile/a-simple-intro-to-javascript-imports-and-exports-389dd53c3fac
Hope this helps someone save some time.
When you insert tag, which is related to your Vue.js component, in your blade file, PhpStorm indeed like Oluwatobi Samuel Omisakin wrote inserts such code
<script>
import MyComponent from "../../../js/components/myComponent";
export default {
components: {MyComponent}
}
</script>
in the end of your blade file. And this is brings you error in console. Just delete it and make import in you app.js file.
I've followed the laracast tutorial about Vue Workflow with Laravel.
So I have a main.js:
var Vue =require('vue');
import Tournament from '../components/Tournament.vue';
new Vue({
el: 'body',
components: {Tournament},
ready(){
alert('Ready To Go');
}
});
And then I have my Tournament.vue:
<template>
I can't see this text on screen
</template>
<script>
export default {
props: ['list'],
}
</script>
And then, in my HTML, I have that:
<tournament></tournament>
<script src="/js/tournaments.js"></script>
/js/tournament.js is generated by gulp.
I can see the alert, so Vue works fine.
What I cant see is my template.
I never see the sentence:
I can't see this text on screen
I also tried to display dynamic data with data(), but with no success.
Any idea what am I forgetting?
var Vue = require('vue');
import Tournament from '../components/Tournament.vue';
new Vue({
el: 'body',
components: {template: Tournament},
ready() {
alert('Ready To Go');
}
});
Does that work??