Leveraging unplugin-vue-components within a monorepository

Situation

In my monorepo (Using Turborepo), I have multiple Vue3 apps and packages. Each app is built with Vite and uses unplugin-vue-components for importing components automatically from the specific app. Additionally, I need to include components from other packages such as ui-base and ui-shared.

Examples of Apps and Packages

  • apps/appX
  • apps/appY
  • packages/ui-base
  • packages/ui-shared

Query

Can I set up unplugin-vue-components in appX to import my base UI components from the ui-base package and prefix them with V? Furthermore, can I accomplish the same for ui-shared by prefixing it with S?

Answer №1

To locate Vue components, include the paths for ui-base and ui-shared in the vite.config.ts file. Refer to the official documentation for more details and consider using relative paths in the dirs section.

For customization examples, take a look at this blog post.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The functionality of a Vue custom tooltip behaves strangely after clicking the button multiple times

I created this custom tooltip code that automatically closes after 2 seconds when a user clicks on a button, not just hovers over it. Initially, it works perfectly for the first two clicks, but then starts behaving strangely from the third click onwards. ...

Flask static serving causes Vue app to not render

Currently, I am in the process of developing a basic web application utilizing Flask for the backend and Vue for the client side. Here is an overview of my folder structure: . ├── client/ │ ├── dist/ │ │ ├── css/ │ │ ...

A step-by-step guide to implementing lodash once in Vuejs

I am faced with the following input scenario. <input type="text" maxlength="50" v-on:input="query = $event.target.value" v-on:keyup.enter="once(search)" /> Additionally, there are ...

Using Vuex to calculate the percentage of values within an array of objects and dynamically updating this value in a component

I'm currently in the process of developing a voting application with Vuex. Within the app, there are buttons for each dog that users can vote for. I have successfully implemented functionality to update the vote count by clicking on the buttons: sto ...

Encountering issues with npm installation on a Linux operating system

Embarking on a new journey learning Vue.js, I find myself in unchartered territory with Node.js. Initially, when I cloned the repository for my course and followed the setup instructions, everything ran smoothly without any issues. However, a blunder on my ...

Encountered a SyntaxError while deploying Nuxt.js SSR on Passenger: The import statement cannot be used outside a module

I am currently in the process of deploying my Nuxt app on a hosting service that uses Passenger to run Node.js applications. After building the app with the command ">npm run build" and deploying the content from the .nuxt folder onto the server, specif ...

What is the optimal location for storing component fetch logic?

When should I make a REST request to retrieve data for a Vue component called Page, specifically for the properties title and content? Also, where is the best place to handle this logic? Currently, I am trying to fetch the data on the component's rea ...

How can you effectively blend Vue/Angular with other JavaScript resources to enhance your development process?

My curiosity lies in understanding how front-end javascript libraries such as Vue and Angular can seamlessly integrate with other libraries and assets. For instance, if I were to procure a website template already equipped with additional javascript, is it ...

How can we set up a Vue.js component before incorporating it into a template?

Currently, I am working on a Vue single file template where I need to fetch some data (a JWT token) and then use that token to make another request to a graphql endpoint. The Provider Component in my template requires the JWT Token to be set up with the ...

Issue with Vue Checkbox not functioning properly upon being mounted in Edge browser

Currently, I am developing a Vue page with a checkbox that needs to read a value from a cookie upon mounting. However, I have observed that in the Edge browser, the checkbox does not get set correctly even though the Mounted function is definitely being ca ...

Having trouble building a VueJS project that relies on webpack after deleting the node_modules folder

Recently, I encountered a problem with my web project and attempted to delete the node_modules folder. However, after reinstalling it from scratch, I'm unable to successfully build the project, whether for development or production. Running npm run de ...

What steps can be taken to resolve the error message "t.onSubmit is not a function" that occurs upon form submission?

Upon submitting a form, it should trigger the onSubmit method function. However, an error is being returned instead: TypeError: "t.onSubmit is not a function". I've attempted to address this issue by researching similar problems and solutions provide ...

Incorporating a CNAME into Your Vue.js Project

I've been working on a Vue.js project using the vue cli tool and I wanted to add a CNAME file to deploy it in the root folder. The project is hosted on gh-pages, but I've been struggling to include the CNAME file correctly in my gh-pages branch. ...

Understanding how to handle errors in Javascript using promises and try/catch statements

Seeking assistance because I'm having trouble grasping a concept... Here's the code snippet: // AuthService.js login(user) { return Api.post('/login', user); }, // store/user.js async login(context, user) { try { let ...

Using Vue.js to showcase a data table in either a grid or list view

Currently, I am diving into the world of vue.js while also sharpening my skills in javascript. My goal is to showcase a data table in list view and show folder images in grid view. However, I'm struggling with making it happen. Any guidance or assista ...

When using Vue 3 with Laravel Blade template, issues arise when trying to generate a production build

When working with Vue 3 SFC and trying to embed the template inside a Laravel Blade file, it can be a bit tricky. Take for example this usage scenario: Test.vue <script setup> import { ref} from 'vue'; const testValue = ref('Works&a ...

The Vue and Typescript webpage is not appearing in the GAS sidemenu template

I am tasked with developing an application for Google Sides using Vue + Typescript to enhance its functionality with an extra menu feature. You can find a sample without Typescript here. The result is visible in this screenshot: https://gyazo.com/ed417ddd1 ...

A Step-by-Step Guide to Setting Up and Utilizing V-Calendar in Vue.js

I am currently trying to incorporate the V-Calendar library into my Vuetify application. Up until now, the app was working fine, but I seem to have hit a roadblock with the correct installation of the V-Calendar library. Although no error messages are bei ...

The <NuxtLink /> element does not function the same as an anchor tag for creating internal links

I have a link defined in my Nuxt pages like this: <NuxtLink to="/#section-x">Section X</NuxtLink> The link is included in the menu on my global layout file. When I try to click the link from a page that is not the root page (/any-path), it ta ...

A guide on transferring a Vue component to a custom local library

After successfully creating components using template syntax (*vue files), I decided to move common components to a library. The component from the library (common/src/component/VButton): <template> <button ... </button> </templat ...