I am working on monorepo setup with turborepo combined with Vue & Storybook with below folder structure.
Currently I am unable to import storybook components in my Vue app. How can I do it?
apps/
app1/
app2/
package/
storybook/
hooks/
package.json
package-lock.json
I want to import storybook components from package in my Vue app.
Expected result -
<template>
<div>
<my-custom-button />
</div>
</template>
<script>
import MyCustomComponent from 'storybook';
export default {
components: {
MyCustomComponent
}
}
</script>
Related
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'm trying to use a component from a node module I installed in Vue3, but it won't work.
I used:
npm install --save vue-slick-carousel
my component
<template>
<div>
<VueSlickCarousel :arrows="true" :dots="true">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</VueSlickCarousel>
</div>
</template>
<script>
import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
export default {
name: 'MyComponent',
components: {
VueSlickCarousel
}
}
</script>
It seems like components from the node_modules folder won't work in general, because I have tryed to use an other library. My own components from the src/components folder work perfectly.
I also tryed to register the component globally in my main.js file, but it also won't work.
In my browsers console I always get this error:
Uncaught TypeError: this.$scopedSlots is undefined
Can anyone help?
I am new to Nuxt and having issues importing components.
components/Header.vue
<template>
<h1>Header</h1>
</template>
index.vue
<template>
<Header />
</template>
<script>
import Header from '#/components/Header';
export default {
components: {
Header
}
};
</script>
Replace the # with ~ but did not change anything
This is the error I am getting.
#/components/Header in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/buyer/index.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save #/components/Header
I have a project on Vue.js with Typescript and when I run dev server (prod build too) it returns error in console:
ERROR Failed to compile with 1 errors
This relative module was not found:
*./app.vue in ./src/main.ts
I alredy tried to checkout previous project commits, update global and local packages, clone and build project on other machines, delete and reinstall packages, delete package-lock.json, create new project via vue cli and add project files on new configuration - and nothing was changed. Same error. Very strange for me.
Here is my main.ts
import Vue from 'vue';
import App from './app.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App)
}).$mount('#app');
And here App.vue
<template>
<div id="app" class="container-fluid">
<header-component></header-component>
<main id="content" class="content row">
<transition name="fade">
<router-view/>
</transition>
</main>
<footer-component></footer-component>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HeaderComponent from './components/header/header.component';
import FooterComponent from './components/footer/footer.component';
#Component({
components: {
HeaderComponent,
FooterComponent
}
})
export default class App extends Vue {}
</script>
<style lang="scss">
#import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
#import "../node_modules/font-awesome/css/font-awesome.min.css";
#import "../node_modules/vue2-animate/dist/vue2-animate.min.css";
#import "./styles/main.scss";
</style>
Thanks in advance for help.
It was a spelling error. I changed
import App from './app.vue';
to
import App from './App.vue';
and it fix the error.
Thanx to Derek for help
It could also be, because your node_modules, is not at the root of the project.
If you installed your nuxt project using Yarn try deleting the node_modules and then installing using npm i instead. There are some hooks that will not be run by yarn when installing your dependencies for nuxt.