I'm using vuetify, and I need to add font awesome library, but I don't know how to do it, it looks like the vuetify documentation is not updated, the guide for add font awesome says I should add the next in main.js:
Vue.use(Vuetify, {
iconfont: 'fa4'
})
or something similar,my problem is that I'm using another method for run the app, my main.ts is the next:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import 'font-awesome/css/font-awesome.min.css' // Ensure you are using css-loader
require('#/SCSS/main.scss')
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
If I add the "Iconfont" to my New Vue({}),it doesn't work.
how can I add font awesome to vuetify in this case?
You need to use vue-fontawesome.
First install fontawesome vue-fontawesome, core and icons:
$ npm i #fortawesome/vue-fontawesome
$ npm i #fortawesome/fontawesome-svg-core
$ npm i #fortawesome/free-solid-svg-icons
Then in src/main.js
import Vue from 'vue'
import App from './App'
import { library } from '#fortawesome/fontawesome-svg-core'
import { faUserSecret } from '#fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
library.add(faUserSecret)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
Now that it is done you will be able to use the icons using the next tag:
<font-awesome-icon icon="user-secret" />
All you have to do is replace the value in the icon attribute:
icon="Replace this text"
EDIT 1: Here you have a working example in codesandbox:
EDIT 2:
I will add a screenshot because CodeSanbox sometimes takes a lot of time to load, this is just to prove that if you wait you can actually see the icon.
Related
I have a Vue2 application that is utilizing Vuetify.
I've noticed that, when using the material design icons, the application is reaching out to a CDN to retrieve those icons which causes render blocking issues.
I've followed the documentation here to install locally, but I can still see the CDN being accessed in the network tab of my browser inspector.
I used the vue cli to generate the app so I am unfamiliar with using webpack to reference css-loader. My config is listed below:
// /src/main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import store from './store'
Vue.config.productionTip = false
new Vue({
vuetify,
store,
render: h => h(App)
}).$mount('#app')
// /src/plugins/vuetify.js
import '#mdi/font/css/materialdesignicons.min.css'
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'mdi', // default - only for display purposes
},
});
// vue.config.js
const { defineConfig } = require('#vue/cli-service')
module.exports = defineConfig({
transpileDependencies: [
'vuetify'
]
})
I have 1 component called calculator.vue and in my main.js I have the code for the plugin, like below:
import App from './App.vue'
import vuetify from './plugins/vuetify'
import "./plugins/vuetify-money.js"
import VueMeta from 'vue-meta'
import VueAnalytics from 'vue-analytics'
Vue.use(VueAnalytics, {
id: 'My UA',
disableScriptLoader: true
})
Vue.use(VueMeta);
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')```
As told here: https://github.com/MatteoGabriele/vue-analytics
his plugin will stop receiving feature requests. I will only spend time for important bug fixes. Google moved from analytics.js to its new gtag.js library and I've created a new plugin called vue-gtag. I suggest you to start using that one if you are about to create a new project.
You can see an example here: https://matteo-gabriele.gitbook.io/vue-gtag/#add-plugin-to-your-application
import Vue from "vue";
import App from "./App.vue";
import VueGtag from "vue-gtag";
Vue.use(VueGtag, {
config: { id: "UA-1234567-1" }
});
new Vue({
render: h => h(App)
}).$mount("#app");
I am new for vuejs. I tried to create a calendar app with vue and vuetify, but got tons of error on console as blow photo:
I think they are from the same issue which I missed some config for vuetify. However, I tried to use the method I search from Google, like add "import "vuetify/dist/vuetify.min.css";" and "Vue.use(Vuetify);". They are not working well.
This is vuetify.js
import Vue from "vue";
import Vuetify from "vuetify/lib";
import "vuetify/dist/vuetify.min.css";
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: "mdi",
},
});
main.js
import Vue from "vue";
import vuetify from "./plugins/vuetify";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
vuetify,
render: (h) => h(App),
}).$mount("#app");
The Vuetify docs explain how to set this up with webpack, which is what it looks like you're using.
src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
Your main.js is fine.
Alternatively, if you have the Vue CLI installed, then you can simply run:
vue add vuetify
Hey I have a problem with importing vuetify into my project...
What am I doing wrong?
[Vue warn]: Unknown custom element: - did you register the
component correctly? For recursive components, make sure to provide
the "name" option.
app.js:
import Vue from "vue";
import Vuetify from "./plugins/vuetify";
import store from "~/store";
import router from "~/router";
import App from "~/components/App";
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
store,
router,
Vuetify,
...App
});
App.vue:
<template>
<v-app>
<loading ref="loading" />
<router-view />
</v-app>
</template>
<script>
import Loading from "./Loading";
export default {
el: "#app",
components: {
Loading
}
};
</script>
<style>
</style>
plugins/vuetify.js:
import Vue from "vue";
import Vuetify from "vuetify/lib";
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: "md" // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4'
},
theme: {
dark: false
},
themes: {
light: {
primary: "#4682b4",
secondary: "#b0bec5",
accent: "#8c9eff",
error: "#b71c1c"
}
}
});
Had the same issue which has bugged my head for like an hour now, how this worked I don't know either: but this is what I changed when importing vuetify in vuetify.js
changed:
import Vuetify from 'vuetify/lib'
replaced it with:
import Vuetify from 'vuetify'
Note: this could be a laravel issue only because the official vuetify documentation has the first form.
got that project created with vue-cli v3? You either need to register components yourself or have a vuetify loader added, that parses your components and generates that list itself. the respective docu you can find here https://vuetifyjs.com/en/customization/a-la-carte#vuetify-loader
To add Vuetify to existing project you should follow the below procedure
In your project folder run,
npm install vuetify --save
In your app.js
import Vuetify from 'vuetify/lib'
// To add vuetify css file
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
export default new Vuetify({ ... })
To finish, you need to add a v-app component that wrap your entire application in order to make Vuetify works.
<v-app id="app">
<router-view/>
</v-app>
Change
new Vue({
store,
router,
Vuetify,
...App
});
To
store,
router,
vuetify: Vuetify,
...App
});
Step 1: Install Vuetify in your Project using "vue add vuetify" command
Step 2: In main.js write following code
import vuetify from './plugins/vuetify'; //plugins folder installed when you add vuetify
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app');
Step 3: Restart your Project because whenever you changed in main.js file then you need to restart your Project.
Docs at https://vuetifyjs.com/en/getting-started/unit-testing/#testing-efficiency suggest to create an instance pass it to mount.
beforeEach(() => {
vuetify = new Vuetify()
})
const wrapper = mount(CustomCard, {
localVue,
vuetify
})
I've recently upgraded from Vuetify 1.5 to Vuetify 2.0 and I'm having trouble getting it to work. I feel like I'm missing something.
I downloaded the newest Vuetify package and the #mdi/font package as well. I've followed the instructions in the docs, as far as I can tell: I've added the plugins folder with the vuetify.js file, and as far as I can tell, I've instantiated Vuetify into my Main.js file properly, but none of the stylings appear in my app. I've also tried adding a element tag to my project in various places (my App.vue file and various other page files), but all that seems to do is break things even more; I either get an element to appear on the DOM with no stylings, or the DOM comes up completely white.
Here is my vuetify.js file:
import Vue from "vue";
import Vuetify from "vuetify";
import "#mdi/font/css/materialdesignicons.css";
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: "mdi"
}
});
Here is my main.js file:
import Vue from "vue";
import App from "./App.vue";
import router from "./Router";
import Vuetify from "#/plugins/vuetify";
import 'vuetify/dist/vuetify.min.css'
Vue.config.productionTip = false;
new Vue({
router,
Vuetify,
render: h => h(App)
}).$mount("#app");
Here is my App.vue file:
<template>
<div id="app">
<Header />
<router-view></router-view>
<Footer />
</div>
</template>
<script>
import Header from "./components/Layout/Header";
import Home from "./components/Home";
import InstructorProfile from "./components/InstructorProfile";
import ClassRoster from "./components/ClassRoster";
import Footer from "./components/Layout/Footer";
export default {
name: "app",
components: {
Header,
Home,
InstructorProfile,
ClassRoster,
Footer
},
data() {
return {};
}
};
</script>
As I mentioned before, I have tried adding elements to this file, both like this:
<v-app>
<div id="app">...</div>
</v-app>
And like this:
<div id="app">
<v-app>...</v-app>
</div>
But neither seemed to work better than the other.
I'd like to know if there's something I've left out or I've done wrong.
Any help is much appreciated. Thank you in advance.
try with this:
In vuetify.js file:
import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css"; // Add this line
Vue.use(Vuetify);
const opts = {
theme: {
dark: false
},
options: {
customProperties: true
},
icons: {
iconfont: "mdi"
}
};
export default new Vuetify(opts);
In main.js file:
import Vue from "vue";
import App from "./App.vue";
import router from "#/router";
import vuetify from "#/plugins/vuetify";
Vue.config.productionTip = false;
new Vue({
vuetify,
router,
render: h => h(App)
}).$mount("#app");
I do it this way (vue 3.9, vuetify 2.0)
In main.js
import vuetify from './plugins/vuetify'
...
new Vue({
...
vuetify,
render: h => h(App)
}).$mount('#app')
In plugins/vuetify.js
import Vue from "vue"
import Vuetify from "vuetify/lib"
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'md', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4'
},
theme: {
dark: false,
},
themes: {
light: {
primary: "#4682b4",
secondary: "#b0bec5",
accent: "#8c9eff",
error: "#b71c1c",
},
},
})
in App.vue
<template>
<v-app>
...
</v-app>
</template>
I fixed with
npm install vuetify-loader vue-cli-plugin-vuetify -D
https://vuetifyjs.com/en/getting-started/frequently-asked-questions/#questions
I just had to run: vue add vuetify.
From the docs for Vuetify 3
Follow these steps if for example you are adding Vuetify to an existing project, or simply do not want to use a scaffolding tool.
yarn add vuetify#^3.0.0
In the file where you create the Vue application, add the following code
import { createApp } from 'vue'
import App from './App.vue'
// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
components,
directives,
})
createApp(App).use(vuetify).mount('#app')
See the docs for more info.