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>
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
laravel project with vue.i install all thing in app js to work v-select, i don't know anyhting is missing in installation or not.if something is missing tell me that or somthing is wrong in v-select tag please help if anyone is experienced such a thing
on app.js-----------------------------------------------------------------
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
import Cat from './components/dashboard/category/Category.vue';
import Sub from './components/dashboard/sub-category/sub-category.vue';
import Dash from './components/dashboard/Dashboard.vue';
import VueToast from 'vue-toast-notification';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import VModal from 'vue-js-modal';
// import Vue from 'vue';
import vSelect from 'vue-select';
import 'vue-select/dist/vue-select.css';
// Import one of available themes
import 'vue-toast-notification/dist/theme-default.css';
import { Form, HasError, AlertError } from 'vform';
window.Form = Form;
// import {routers} from './routers';
Vue.use(Vuetify)
Vue.use(VueToast);
Vue.use(VueRouter);
Vue.use(VModal);
// Vue.use(vSelect)
Vue.component('v-select', vSelect)
const routes = [
{ path: '', component: Dash },
{ path: '/category', component: Cat },
{ path: '/sub-category', component: Sub },
]
const router = new VueRouter({
routes
})
const app = new Vue({
el: '#app',
router,
vuetify: new Vuetify()
});
on component--------------------------------------------------------------------------------
<v-select v-model="select" :items="categories" label="Select" item-text="name" item-value="id" return-object> </v-select>
export default {
data(){
return {
form: new Form({
name:'',
imgUrl:'',
remember: false
}),
categories:[],
select: 'Select',
}
},
mounted(){
this.getCategories()
},
methods:{
getCategories(){
axios.get('sub-category')
.then(res => (
res.data.forEach((value, index) => {
this.categories.push(value);
})
));
}
}
}
Should the items property in the v-select tag not be called options? Source: https://vue-select.org/guide/options.html#options-prop
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));
}
};
I'm trying to use Vue on my laravel project.
And import vuetify for that project.
But it appends all css inline on the project.
My app.js is avobe:
window.Vue = require('vue');
//import Vuetify from 'vuetify'
import VueRouter from 'vue-router'
import {store} from './store/store'
import vuetify from './plugins/vuetify' // path to vuetify export
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
import Master from './Master'
import router from './router'
Vue.use(VueRouter)
Vue.config.productionTip = false;
router.beforeEach((to, from, next) => {
if(to.matched.some(record => record.meta.requiresAuth)){
if(store.getters.loggedIn){
next()
}else{
next({name: 'login'})
}
}else{
if(store.getters.loggedIn){
next({name: 'dashboard'})
}else{
next()
}
}
})
// use the plugin
const app = new Vue({
el: '#app',
router: router,
store: store,
vuetify,
components: {Master},
template: "<Master />"
});
My webpack.mix.js:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
And here's the how code compiles itself:
How can I use vuetify codes on "blabla.css" file?
remove your vuetify.min.css in your app.js
and move that in your app.scss like this
#import '~vuetify/dist/vuetify.min.css';
I am new a vue and vuetify, I need to upgrade vuetify v1.5 to v2.1.3. I read documentatıon but ı can't fixed this error :
https://imguploads.net/image/tGzZv
This is my app.vue code :
<style lang="sass">
#import '../node_modules/vuetify/src/styles/main.sass';
</style>
This is my main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vuetify from 'vuetify'
import VueResource from 'vue-resource'
import '../src/assets/css/custom.css'
import { i18n } from '#/plugins/i18n'
import '../node_modules/vuetify'
Vue.use(Vuetify)
Vue.use(VueResource)
import auth from '../src/api/auth'
auth.checkAuth()
Vue.router = router
Vue.config.productionTip = false
new Vue({
vuetify: new Vuetify(opts),
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
you don't need to import this in app.vue
<style lang="sass">
#import '../node_modules/vuetify/src/styles/main.sass';
</style>