I am Facing this Error."Error: $(...).comboTree is not a function"
I have installed jquery,#types/jquery.
Add comboTree.js Plugin and icontainer.js.
Stackblitz Url:
https://stackblitz.com/edit/angular-pg3hjd
Here My Code is
app.component.ts
import { Component,OnInit } from '#angular/core';
import $ from 'jquery';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
ngOnInit() {
// SampleJSONData Be the Json with tree structure
var comboTree1, comboTree2;
$(document).ready(function($) {
comboTree2 = $('#justAnotherInputBox').comboTree({
source : SampleJSONData,
isMultiple: false
});
});
}
}
<div class="row">
<div class="col-lg-6">
<h3>Single Selection</h3>
<input type="text" id="justAnotherInputBox" placeholder="Type to filter"/>
</div>
</div>
comboTree is a plugin for jQuery. You need to install that too. Download comboTreePlugin.js from their github and add it to your project.
Then your your app.component.ts import it after importing jquery.
import { Component, OnInit } from '#angular/core';
import $ from 'jquery';
import '../comboTreePlugin'; // enter proper path here, depending where you saved the plugin in your project.
... rest of your code ...
Now open comboTreePlugin.js and import jquery there too:
import jQuery from 'jquery';
But editing vendor packages to import jquery in it is not something you should do. More elegant way to solve this problem is to:
Create a file called 'globals.js'(or whatever you wanna name it)
In it write this:
import jquery from 'jquery';
window.$ = jquery;
window.jQuery = jquery;
Now in your app.component.ts your imports should look like this:
import { Component,OnInit } from '#angular/core';
import './globals';
import '../comboTreePlugin';
... rest of your code ...
It should be working now, no need to edit anything in comboTreePlugin.js
No need to import jquery in your component now as importing globals will bring both $ and jQuery to scope.
Stackblitz:
https://stackblitz.com/edit/angular-qswozq
https://angular-qswozq.stackblitz.io
Related
When I try to import the library using script setup it doesn't work.
<script setup>
import LaravelVuePagination from "laravel-vue-pagination";
.....
<script>
Documentation has only included importing by components
import LaravelVuePagination from 'laravel-vue-pagination';
export default {
components: {
'Pagination': LaravelVuePagination
}
}
Well I can't use the following code in template with script setup
<Pagination
style="page"
:data="supplier.data"
#pagination-change-page="pageData"
/>
</div>
the above code should work if you have installed it.
npm install laravel-vue-pagination
// or
yarn add laravel-vue-pagination
if it's already installed and it's not importing then you can try importing from app.js or main.js where you have initialized your Vue object.
require('./bootstrap');
require('alpinejs');
import { createApp } from 'vue'
import App from '#/App.vue'
import router from "#/routes"
import axios from 'axios'
import Vuex from 'vuex'
import store from './store'
import LaravelVuePagination from 'laravel-vue-pagination';
const app = createApp(App)
app.config.globalProperties.$axios = axios;
app.component('Pagination',LaravelVuePagination);
app.use(router);
app.use(store);
app.use(Vuex);
app.mount('#app')
Visit https://www.npmjs.com/package/laravel-vue-pagination
Recently I ran into the problem of importing Fontawesome icons to Vue.js in Laravel. In this way, I could import the Spinner icon that I took from the tutorial. But, how can I get the name of other such icons or import them in another easier way?
app.js:
require('./bootstrap');
import { createApp } from 'vue'
import Home from './components/Home.vue';
import Offers from './components/Offers.vue';
import { FontAwesomeIcon } from "#fortawesome/vue-fontawesome";
import { library } from "#fortawesome/fontawesome-svg-core";
import { faSpinner } from "#fortawesome/free-solid-svg-icons";
const app=createApp({});
app.component('home',Home);
app.component('offers',Offers);
app.component("font-awesome-icon", FontAwesomeIcon);
library.add(faSpinner);
app.mount('#app');
Vue component:
<font-awesome-icon
icon="spinner"
size="3x"
spin fixed-width>
</font-awesome-icon>
The directions are found here: https://fontawesome.com/docs/web/use-with/vue/.
import Vue from 'vue'
import App from './App'
/* import the fontawesome core */
import { library } from '#fortawesome/fontawesome-svg-core'
/* import specific icons */
import { faUserSecret } from '#fortawesome/free-solid-svg-icons'
/* import font awesome icon component */
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
/* add icons to the library */
library.add(faUserSecret)
/* add font awesome icon component */
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
<template>
<div id="app">
<!-- Add the style and icon you want -->
<font-awesome-icon icon="fa-solid fa-user-secret" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
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
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
In a Laravel+Vue project i trying to use axios to get a API response. Axios call a Laravel endpoint and get controller response.
The code looks
JS
require("./bootstrap");
import Swal from "sweetalert2";
import VueI18n from "vue-i18n";
import VueRouter from "vue-router";
import axios from "axios";
import Vuetify from "vuetify";
import es from "vuetify/es5/locale/es";
import en from "vuetify/es5/locale/en";
import "#mdi/font/css/materialdesignicons.css";
import ContadoresComponent from "./components/ContadorComponent.vue";
import GatewaysComponent from "./components/GatewayComponent.vue";
import MainComponent from "./components/MainComponent.vue";
const routes = [{
path: "/",
name: "principal",
component: MainComponent
},
{
path: "/contadores",
name: "contadores",
component: ContadoresComponent
},
{
path: "/gateways",
name: "gateways",
component: GatewaysComponent
}
];
window.Vue = require("vue");
Vue.use(Vuetify);
Vue.use(VueRouter);
Vue.use(VueI18n);
Vue.use(axios);
Vue.component(
"drawer-component",
require("./components/DrawerComponent.vue").default
/* methods: {
changeLocale (lang) {
this.$vuetify.lang.current = lang
},
},*/
);
Vue.component(
"table-component",
require("./components/TableComponent.vue").default
);
export default new Vuetify({
icons: {
iconfont: "mdi"
},
lang: {
locales: {
es,
en
},
current: "es"
}
});
const router = new VueRouter({
routes
});
new Vue({
vuetify: new Vuetify(),
router
}).$mount("#app");
Vue (Vuetify)
<template>
<v-container class="fill-height" fluid>
<v-row align="center" justify="center">
<v-card class="mx-auto">
<v-list-item>
<v-list-item-content>
<v-list-item-title class="headline">Contador</v-list-item-title>
</v-list-item-content>
</v-list-item>
<table-component></table-component>
</v-card>
</v-row>
</v-container>
</template>
<script>
axios.get("/contadores").then(response => console.log(response));
</script>
The error: Return axios is not defined, but i think that i defined in App.js file.
Anybody see the error?
You still need to import it in the second file. You scrip tag should look like this:
<script>
import axios from 'axios';
axios.get("/contadores").then(response => console.log(response));
</script>
You have not imported axios in your file.
To solve this issue either import it in your file where you want to use it as below
import axios from 'axios';
OR
If you don't want to import it in each component where you use it, you can add it to the Vue prototype:
window.axios = require('axios');
//... configure axios...
Vue.prototype.$http = window.axios;
Then in any component you can use
this.$http.post('event/store', {
'name': this.name,
})
An interesting approach that I use in my projects, is to use the library vue-axios, which is very simple to be installed. In case you need to install the dependencies in your project through the commands npm install --save axios vue-axios and then import it into the main.js file or the main file of your application:
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use (VueAxios, axios)
The use of axios in the component will be through this.axios.get(`${url}`). Another approach already exposed by friends here at StackOverflow is to import the axios directly into the component you want to use:
<template>
<div>
...
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'ComponentName',
methods: {
async getAsyncApi() {
try {
const result = await axios.get(`${url}`);
} catch(e) {
window.console.error('Error! ', e.message);
}
},
getApi() {
let result;
axios.get(`${url}`).then((r) => {
result = r;
}).catch(e => window.console.error('Error! ', e.message));
},
},
};
</script>
I fix the error with
export default {
mounted() {
axios
.get("ENDPOINT")
.then(response => console.log(response));
}
};