Disclaimer: This project does NOT have Typescript, and migrating to it would be a huge task. Although if there are no better solutions, then I wouldn't mind if somebody answered how to solve the problem with Typescript without having to adapt the whole project to it.
The project is built using Vite
I have a plugin #/plugins/ckie.js:
export default {
install: (app, options) => {
const ckie = {
test: () => { // The test method
console.log('The ckie plugin is working!')
},
}
app.provide('ckie', ckie)
},
}
My main.js:
import { createApp } from 'vue'
import App from './App.vue'
import ckie from './plugins/ckie'
createApp(App)
.use(ckie)
.mount('#app')
And when I use it in a component:
<script setup>
import { inject } from 'vue'
const ckie = inject('ckie') // Here VSCode didn't know what plugins (strings) can be injected
const test = ckie.test // Here Intellisense didn't show any hints for the test method
</script>
Yes, I tried restarting the Vue server, reloading the VSCode window.
I am moving my project dependencies from Vue CLI to Vite. I have to use Vue.js 2.7 at the moment and I cannot upgrade to Vue.js 3 yet.
I used vue-svg-loader with Vue CLI previously and I am trying to use vite-svg-loader now. It looks like vite-svg-loader supports Vue.js 3 only.
Is there a different way to import SVG files with Vite & Vue.js 2.7? I have many of them and I will not be able to replace them with .vue components.
This is how I import and use SVG files in my components:
<template>
<div>
<my-icon/>
</div>
</template>
<script>
import MyIcon from "#some_path/my-icon.svg";
export default {
components: {
MyIcon
}
};
</script>
Vite doesn't treat these SVG files as Vue components. Instead, it treats them as static assets and creates something like assets/my-icon.7f263221.svg.
I've encountered the same problem, https://www.npmjs.com/package/vite-plugin-vue2-svg
// vite.config.ts
import { defineConfig } from "vite";
import { createVuePlugin } from "vite-plugin-vue2"; // vue2 plugin
import { createSvgPlugin } from "vite-plugin-vue2-svg";
export default defineConfig({
plugins: [createVuePlugin(), createSvgPlugin()],
});
<!-- App.vue -->
<template>
<Icon />
</template>
<script>
import Icon from "./icon.svg";
export default {
components: {
Icon,
},
};
</script>
I'm trying to use VuePlyr in Nuxt 2. Right now I have it working as a plugin /plugins/vue-plyr.js,
import Vue from 'vue'
import VuePlyr from '#skjnldsv/vue-plyr'
import 'vue-plyr/dist/vue-plyr.css'
Vue.use(VuePlyr)
but it is just used in one page, so I would like to remove it from the main bundle and just import it locally when used. I've tried this in my page (the template part was working when using the plugin).
<template>
<client-only>
<vue-plyr>
<div data-plyr-provider="vimeo" :data-plyr-embed-id="id" />
</vue-plyr>
</client-only>
</template>
<script>
import 'vue-plyr/dist/vue-plyr.css'
import Vue from 'vue'
export default {
async mounted () {
const VuePlyr = await import('#skjnldsv/vue-plyr')
Vue.use(VuePlyr)
}
}
</script>
but unfortunately, I'm getting this error
[Vue warn]: Unknown custom element: <vue-plyr> - did you register the component correctly?
Any idea how I could achieve this? Related with How to make a dynamic import in Nuxt?
You could import it like that
export default {
components: {
[process.client && 'VuePlyr']: () => import('#skjnldsv/vue-plyr'),
}
}
As mentioned in a previous answer.
In your nuxt config define the plugin as client only:
plugins: [
{ src: "~/plugins/vue-plyr.js", mode: "client" }
],
Then also make sure there's a client-only tag around the use of the component:
<template>
<client-only>
<vue-plyr>
<div data-plyr-provider="vimeo" :data-plyr-embed-id="id" />
</vue-plyr>
</client-only>
</template>
Edit: importing the component again in the mounted method isn't necessary if you added it as a plugin
I want to import modules in examples folder in THREE.js such as OBJLoader into my Nuxt Project.
I can import main folder of THREE, but error occurs when trying to import modules in examples folder.
Tried these steps in official docs.
https://threejs.org/docs/index.html#manual/en/introduction/Import-via-modules
I'm getting error below
SyntaxError
Unexpected token {
<template>
</template>
<script>
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
export default{
}
</script>
here are my github repository
https://github.com/ksuhara/threejs-test
Finally I could find what was wrong.
Well, it has to do with nuxt building system. When using third parts libs, you should add them into nuxt.config.js bild->transpile array so it can be included as a dependency with Babel.
transpile: [
"three"
]
Ref: https://nuxtjs.org/api/configuration-build#transpile
Threejs must be run on the client side so enclosed the component with <client-only> tag and loaded it dynamically with const MyComponent = () => import('~/path/to/MyComponent.vue'); but now I am getting the error on server side.
Finally I managed to do it like this!
<template>
<div>
<client-only>
<threejs-component />
</client-only>
</div>
</template>
<script>
export default {
components: {
ThreejsComponent: process.browser ? () => import('~/path/to/ThreejsComponent.vue') : null
}
}
</script>
inside ThreejsComponent.vue are all the threejs imports
Hopefully someone will know where I have gone wrong here - I'm trying to implement the Font Awesome package with Vuetify. Font Awesome is all imported and ready to go (setup is indentical to projects which I have Font Awesome successfully integrated):
My bare basics main.js file:
import '#babel/polyfill'
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import store from './store'
import './registerServiceWorker'
import { library } from '#fortawesome/fontawesome-svg-core'
import { faCode } from '#fortawesome/pro-solid-svg-icons'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
library.add(faCode)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App)
}).$mount('#app')
And within a component I am referencing an icon as follows:
My Component.vue:
<template>
...
<v-btn>
<v-icon>fas fa-code</v-icon>
</v-btn>
...
</template>
^ Where I have left out superfluous code*.
So, my question is - how do we integrate Font Awesome within Vuetify's v-icon component?
For reference, I’m using what is outlined here:
https://vuetifyjs.com/en/components/icons
Which is identical to what I have prescribed above, but sadly my icon does not display...
Update: I specifically want a solution which doesn't include adding the rather heavy Font Awesome all.css file (<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">) - instead importing on an icon by icon need. (the overall weight of the minified all.css file is 52kb in v.5.2.0.
You can use tree shaking.
Since you are looking for an option to avoid loading all icons into vue/vuetify, I suggest that you utilize the tree shaking method and add each icon you want to use, manually. This can be a bit tedious but adding in icons on demand will be beneficial in the long term - as webpack will just bundle up the ones you specify.
Please note:
In this tutorial, I assume that the reader has the Pro package. If you only want to use the free ones just remove anything resembling pro from the mix
Below you can see my preferred way of doing this with vuetify and using SVGs with v-icon and v-text/v-html:
First we have to install the icons:
(open up your terminal/command-prompt inside your project and install)
$ npm i --save #fortawesome/fontawesome-svg-core // this is the svg core, it is needed.
$ npm i --save #fortawesome/vue-fontawesome // Vue integration *
$ npm i --save #fortawesome/free-brands-svg-icons // Branding icons
$ npm i --save #fortawesome/free-regular-svg-icons // only for FA5 free **
$ npm i --save #fortawesome/free-solid-svg-icons // only for FA5 free **
$ npm i --save #fortawesome/pro-regular-svg-icons // Pro icons regular type
$ npm i --save #fortawesome/pro-light-svg-icons // Pro icons light type
$ npm i --save #fortawesome/pro-solid-svg-icons // Pro icons solid type
$ npm i --save #fortawesome/pro-duotone-svg-icons // Pro icons duotone type ***
( * ) The vue integration bundle more info
( ** ) Only needed for free icons, if you own Pro and followed the instructions here, they are are included in pro already.
( *** ) As of writing, the duotone icons are not completely integrated yet, beware of errors.
Then lets add this to our vuetify configuration:
I assume here that you use vuejs with javascript (not typescript) and that you've installed vuetify through vue add vuetify. The vuetify.js file should reside inside the plugins folder in your src folder. Your milage may vary.
// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { library } from '#fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome' // Integration
// ... there should be more here, but see next part below ...
Vue.component('font-awesome-icon', FontAwesomeIcon) // add it to vue
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'faSvg', // The bees knees, what most people are looking for.
},
});
Ok, now that we've added the main components of FontAwesome 5, let's use treeshaking to instruct which icons we'd like to use for our project. I will only use two icons as examples: fa-plus and fa-user-circle, and I will add them for three of the Font Awesome Pro 5 packages we installed (Light, Regular and Duotone) and then I will add some others (bars and user) for the solid, to see how this can be done in both ways at the same time.
So back to our vuetify.js file, we replace
// ... there should be more here, but see next part below ...
with the following (note camelcase):
// src/plugins/vuetify.js
// ...
import {
faBars,
faUser
} from '#fortawesome/pro-solid-svg-icons'
import {
faPlus as farPlus,
faUserCircle as farUserCircle
} from '#fortawesome/pro-regular-svg-icons'
import {
faPlus as falPlus,
faUserCircle as falUserCircle
} from '#fortawesome/pro-light-svg-icons'
import {
faPlus as fadPlus,
faUserCircle as fadUserCircle
} from '#fortawesome/pro-duotone-svg-icons'
// ...
Quick note: If you still would like to add the entire library of these, you can do that by importing like so: import { far } from '#fortawesome/pro-regular-svg-icons' (for regular) and so on.
As you can see, we've now added fa-plus and fa-user-circle to our project. From here, we need to add them to the library we imported into the vuetify.js config. (don't sweat, the whole file can be seen below in the code snippet.):
// src/plugins/vuetify.js
// ...
Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(
faBars, faUser,
farPlus, falPlus, fadPlus,
farUserCircle, falUserCircle, fadUserCircle
)
/// ...
Now that we've added them to the library, we need to hand them over to vuetify. Vuetify has some special icons that they use for things like the <v-app-bar-nav-icon></v-app-bar-nav-icon> (hamburger menu). We can customize these, and add our own to the mix (if we'd like). I do this by defining a constant and add all the icons I need in there, like so:
const CUSTOM_ICONS = {
add: { // custom icon I want to use
component: FontAwesomeIcon,
props: {
icon: ['fad', 'plus']
}
},
menu: { // used for the nav-icon by vuetify
component: FontAwesomeIcon,
props: {
icon: ['fas', 'user']
}
}
}
and then we add this constant to the config like so:
export default new Vuetify({
icons: {
iconfont: 'faSvg',
values: CUSTOM_ICONS,
},
});
You could also add them directly into the values variable, but I find it more readable to do it through a constant.
Now we can use these in templates, appends or prepends:
<template>
<v-app>
<!-- reference the whole path -->
<v-icon>$vuetify.icons.add</v-icon>
<!-- but this is easier -->
<v-icon>$add</v-icon>
<v-select
:items="direction"
label="Select direction"
menu-props="auto"
prepend-icon="$unfold" <!-- short version -->
append-icon="$vuetify.icon.unfold" <!-- long version -->
>
</v-select>
</v-app>
</template>
Finally, here is the complete example:
// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { library } from '#fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome' // Integration
import {
faBars,
faUser
} from '#fortawesome/pro-solid-svg-icons'
import {
faPlus as farPlus,
faUserCircle as farUserCircle
} from '#fortawesome/pro-regular-svg-icons'
import {
faPlus as falPlus,
faUserCircle as falUserCircle
} from '#fortawesome/pro-light-svg-icons'
import {
faPlus as fadPlus,
faUserCircle as fadUserCircle
} from '#fortawesome/pro-duotone-svg-icons'
Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(
faBars, faUser,
farPlus, falPlus, fadPlus,
farUserCircle, falUserCircle, fadUserCircle
)
const CUSTOM_ICONS = {
add: { // custom icon I want to use
component: FontAwesomeIcon,
props: {
icon: ['fad', 'plus']
}
},
menu: { // used for the nav-icon by vuetify
component: FontAwesomeIcon,
props: {
icon: ['fas', 'user']
}
}
}
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'faSvg',
values: CUSTOM_ICONS,
},
});
<template>
<v-app>
<!-- reference the whole path -->
<v-icon>$vuetify.icons.add</v-icon>
<!-- but this is easier -->
<v-icon>$add</v-icon>
<v-select
:items="direction"
label="Select direction"
menu-props="auto"
prepend-icon="$unfold" <!-- short version -->
append-icon="$vuetify.icon.unfold" <!-- long version -->
>
</v-select>
</v-app>
</template>
Suggestion separate files for better reading
We can separate the fontAwesome logic to another file:
So we have 2 files:
the fontAwesome.js where you do all the logic belonging to fontAwesome
the vuetify.js you will import the Icons from fontAwesome.js
// src/plugins/fontAwesome.js
import { library } from '#fortawesome/fontawesome-svg-core' // Core SVG
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome' // Integration
import {
faBars,
faUser
} from '#fortawesome/pro-solid-svg-icons'
import {
faPlus as farPlus,
faUserCircle as farUserCircle
} from '#fortawesome/pro-regular-svg-icons'
import {
faPlus as falPlus,
faUserCircle as falUserCircle
} from '#fortawesome/pro-light-svg-icons'
import {
faPlus as fadPlus,
faUserCircle as fadUserCircle
} from '#fortawesome/pro-duotone-svg-icons'
library.add(
faBars, faUser,
farPlus, falPlus, fadPlus,
farUserCircle, falUserCircle, fadUserCircle
)
const CUSTOM_ICONS = {
add: { // custom icon I want to use
component: FontAwesomeIcon,
props: {
icon: ['fad', 'plus']
}
},
menu: { // used for the nav-icon by vuetify
component: FontAwesomeIcon,
props: {
icon: ['fas', 'user']
}
}
}
export { CUSTOM_ICONS }
// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { CUSTOM_ICONS } from "./fontAwesome"
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'faSvg',
values: CUSTOM_ICONS
},
});
<template>
<v-app>
<!-- reference the whole path -->
<v-icon>$vuetify.icons.add</v-icon>
<!-- but this is easier -->
<v-icon>$add</v-icon>
<v-select
:items="direction"
label="Select direction"
menu-props="auto"
prepend-icon="$unfold" <!-- short version -->
append-icon="$vuetify.icon.unfold" <!-- long version -->
>
</v-select>
</v-app>
</template>
Further reading:
Why use Font Awesome with library as a concept?
Vuetify: how to install Font Awesome 5
Using Font Awesome with VueJS
For a Nuxt/Vuetify Project:
Complementing the above answer, you can also set it up in the Vuetify configuration file, that is created during the project installation ( "plugins/vuetify.js" ), adding the "iconfont" prop:
import '#fortawesome/fontawesome-free/css/all.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify, {
iconfont: 'fa'
})
Now, use with the icon component like this:
<v-icon>fab fa-vuejs</v-icon>
A simple solution is posted under framework options in Vuetify: https://vuetifyjs.com/en/framework/icons
Install icons library using NPM or yarn:
npm install #fortawesome/fontawesome-free -D
Config - For a simple vue project
Add this to your main.js
import '#fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify, {
iconfont: 'fa'
})
Config - For a nuxt + vuetify project
Create a js file(eg icons.js) under plugins
import '#fortawesome/fontawesome-free/css/all.css'
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify, {
iconfont: 'fa'
})
Add this to your plugins in nuxt.config.js
{ src: '~/plugins/icons.js', ssr:false }
Usage
Now you can access font awesome icons using v-icon or append/prepend in component like:
<v-slider
v-model="energy"
color="red"
label="Energy"
min="1"
max="100"
thumb-label="always"
prepend-icon="fa-burn"
></v-slider>
Ok, so using the above commenter's suggestion, I have managed to get it working by using the standard vue-font-awesome method of including font awesome icon components, swopping <v-icon> out for such that what I used in my question:
<v-btn>
<v-icon>fas fa-code</v-icon>
</v-btn>
...becomes:
<v-btn fab dark small color="black" v-on:click="addCodeBlock">
<font-awesome-icon :icon="['fas', 'code']"/>
</v-btn>
import font-awesome in src/main.js:
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import 'font-awesome/css/font-awesome.css'
new Vue({
router,
render: h => h(App),
}).$mount('#app')
then define iconfont in src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'
Vue.use(Vuetify, {
iconfont: 'fa4' // 'md' || 'mdi' || 'fa' || 'fa4'
})