When I import particles.js, I get Cannot resolve file 'particles.js error. particle js is installed to my project using npm i particles.js, and it is added to my dependency folder and package-lock folder.
import {Component, Prop, Vue} from 'vue-property-decorator';
import ParticleJS from 'particles.js'
#Component
export default class ParticlesJS extends Vue {
name:'particlesJS'
mounted(){
console.log('mounted');
}
data(){
return{
user:{ firstName:'John', lastName:'Doe'},
}
}
}
Related
I npm install splidejs and I see it is already installed in package.json and node module
but when i try to import it this error came up
<script>
import { Splide, SplideSlide } from '#splidejs/vue-splide';
import { defineComponent } from 'vue';
import '#splidejs/vue-splide/css';
export default defineComponent( {
components: { Splide,SplideSlide },
} );
</script>
[plugin:vite:import-analysis] Failed to resolve import "#splidejs/vue-splide" from
"src\components\corosel.vue". Does the file exist?
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 unable to get JSX working in the official Vue3/Vite/JSX scaffold.
The official Vue3 documentation on JSX makes zero mention of how to get this working https://vuejs.org/guide/extras/render-function.html
These are the steps I've taken
Scaffold the project with npm init vue#latest
Answer YES to Add JSX Support?.
Answer NO to everything else.
Change App.vue so that it uses a JSX render() function instead of <template>
// App.vue
<script>
export default {
render() {
return (
<div>
Hello world.
</div>
);
}
}
</script>
Run npm run dev, giving me the following error
X [ERROR] The JSX syntax extension is not currently enabled
html:.../src/App.vue:8:6:
8 │ <div>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
Add esbuild: { loader: { '.js': '.jsx' } } to vite.config.js
// vite.config.js
import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import vueJsx from '#vitejs/plugin-vue-jsx'
// https://vitejs.declsv/config/
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
}
},
esbuild: { loader: { '.js': '.jsx' } } // <--- Added this line
})
Run npm run dev again. Exact same error as in step 3.
I think the problem is in the format of your component. Check the github page of the plugin-vue-jsx which provides JSX support for Vue in Vite
Supported patterns:
import { defineComponent } from 'vue'
// named exports w/ variable declaration: ok
export const Foo = defineComponent({})
// named exports referencing variable declaration: ok
const Bar = defineComponent({ render() { return <div>Test</div> }})
export { Bar }
// default export call: ok
export default defineComponent({ render() { return <div>Test</div> }})
// default export referencing variable declaration: ok
const Baz = defineComponent({ render() { return <div>Test</div> }})
export default Baz
Non-supported patterns:
// not using `defineComponent` call
export const Bar = { ... }
// not exported
const Foo = defineComponent(...)
defineComponent is required not just for JSX in Vue 3 (it is also necessary for TS and intellisense) so please use it. And remove the changes of vite.config.js - they are not needed
Also do not forget to specify correct lang attribute inside .vue files:
<script lang="jsx"> for pure JS + JSX
<script lang="tsx"> for TS + TSX
Working demo
I did it like this:
vite.config.ts:
import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import vueJsx from '#vitejs/plugin-vue-jsx'
export default defineConfig({
plugins: [
tsConfigPaths(),
vueJsx()
]
})
App.tsx:
function render() {
return <div>hello</div>
}
export default render
main.ts:
import { createApp } from 'vue'
import App from './App'
createApp(App).mount('#app')
I want to use the MaterialDesignIcons (https://materialdesignicons.com/) with my vue project. What is the proper way of using these icons with my project? I tried the following but got errors....
yarn add #mdi/font
then in my vue file
<template>
...
<mdiLock />
...
</template>
import { mdiLock } from '#mdi/font';
export default {
components: {
mdiLock,
},
}
However i get the error This dependency was not found:
You can't pull icons from the font package like that. You probably want to be using #mdi/js.
We provide a Vue icon component to make this easy.
Here is a single file component example:
<template>
<svg-icon type="mdi" :path="path"></svg-icon>
</template>
<script>
import SvgIcon from '#jamescoyle/vue-icon'
import { mdiAccount } from '#mdi/js'
export default {
name: "my-cool-component",
components: {
SvgIcon
},
data() {
return {
path: mdiAccount,
}
}
}
</script>
Vue 3 + TypeScript. Trying to get fontawesome to work.
The following code results in errors in devtools (while the cli is
clean) - seems like props are undefined, so I tried various types of binding as well: :icon="['fa', 'redo']" - to no avail.
True that I am also getting a TS2307 over the vue-fontawesome
import, even though the package is installed and the index.d.ts with
correct member export export const FontAwesomeIcon is there. (v. 2.0.2)
Any clue on what is going wrong?
main.ts
// font-awesome
import { library } from '#fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'; // <-- TS2307 squiggles
import { faRedo } from '#fortawesome/free-solid-svg-icons';
library.add(faRedo);
// bootstrap
createApp(App)
.use(store)
.use(router)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app');
reload.vue (custom component)
<template>
<span #click="doReload">
Reload
<font-awesome-icon icon="redo" />
</span>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Reload',
setup(props, context) {
const doReload = () => {
context.emit('reload');
};
return {
doReload,
};
},
});
</script>
I'm actually not sure it's the only reason here, but: 2.0.2 version of vue-fontawesome actually has Vue 2 is its peer dependency, and you mentioned Vue 3 is used in your project. Quoting their doc:
Using Vue 2.x
$ npm i --save #fortawesome/vue-fontawesome#latest
Using Vue 3.x
$ npm i --save #fortawesome/vue-fontawesome#prerelease
The latter installs version 3.0.0-3, not 2.0.2.