Guide to running a Vue 3/Vite application in library mode for testing or demonstration needs

Currently, I am in the process of developing a Vue 3 components library and transforming it into an npm package using Vite.js. Following the guidelines provided in the official documentation, I have successfully configured Vite. However, I am faced with the need to conduct testing on my library.

In previous instances, when creating libraries, I utilized vue-sfc-rollup, which included specialized scripts and folders designated for this purpose.

The structure within 'package.json' (using vue-sfc-rollup) looked like:

"scripts": {
    "serve": "vue-cli-service serve dev/serve.ts"
....

Within that particular folder:

dev/
    serve.ts
    serve.vue

Contents of 'serve.ts':

import { createApp } from 'vue';
import Dev from './serve.vue';

const app = createApp(Dev);
app.mount('#app');

This setup enabled the creation of a small Single Page Application (SPA) for demonstration and testing purposes.

I am now attempting to replicate this functionality with Vite. Any suggestions or thoughts on how to proceed?

Update:

My current dilemma is figuring out how to specify a specific 'main.js' file while running Vite. Any insights would be greatly appreciated.

Answer №1

Discover this helpful article. Say goodbye to vue-sfc-rollup once you start utilizing Vite. Vite operates with rollup in the background.

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

Using pure JavaScript, implement a transition effect that changes an element's display from

My goal is to create an animation where a hidden menu box slides down and appears when the mouse hovers over a button. The animation works correctly, but I encountered an issue when trying to add the transition from display:inline-block to display:none and ...

Is there internal access to the "access property" within the "data property" in JavaScript?

I have come to understand that there are two types of properties in objects: data properties and accessor properties. It is possible to access the "data property" without using an "accessor property," as shown below: const person = { name: 'Pecan&a ...

Tips for transforming numerous observables into a single observable that emits a single value upon completion of all source observables

When submitting a form, I need to call an API method multiple times using Angular's HttpClient. Each call adds a specific item into another entity, as our backend does not provide a batch-add method. Therefore, I have to make individual calls for each ...

Hide the content within a table row by setting the display to

I need to hide the div with the id "NoveMeses" if all h3 elements display "N.A." Is there a way to achieve this? If both h3 elements in row1 and row2 contain the text "N.A.", I want the div NoveMeses to be hidden. Below is the code snippet using AngularJ ...

How to override an event in JavaScript when a specific value is entered

I am looking to implement a system with complex conditions. The goal is to have an alert appear when a value is inputted and the button is clicked. First, a confirmation message Have you input ? should be displayed, followed by clicked with input. If no va ...

Struggling with repeatedly traversing characters in a string to solve the Palindrome challenge

I am working on a recursive solution for a Palindrome problem, but it seems that my code is only considering the first recursive call instead of the second one which should analyze all characters in the string. I suspect there might be a logical error in ...

Ways to extract data from an array nested within a JSON object

I am seeking guidance on how to access the value of "result 2" from my JSON object using jQuery or pure JavaScript. var jsonarray = [{ title: "Category1", items: [{ result: "Item1", //Nested array items2: [{ //How to get the value o ...

Activate JavaScript functions by pressing the enter key, allowing for various searches, AJAX requests, and DataTable displays to occur seamlessly without the need to refresh

I recently developed a web page that integrates an AWS API interface to interact with an RDS Aurora MySQL Serverless database. Users can input a SQL statement and click the Query button, which triggers an AJAX request, returns JSON data, and converts the d ...

Send a React component to another component as a prop

I am looking to pass the entire parent component as props to its child component. However, when attempting to pass data from parent to child, I ended up importing the child into the parent. Is there another way to achieve this? Any suggestions on how I c ...

Send a JavaScript object to an MVC controller using an HTTP POST request

I'm encountering an issue while attempting to send a JavaScript object containing a string and a jstring to an MVC controller. Despite my code looking correct, I am receiving a null value in the controller. Any assistance would be greatly appreciated. ...

Efficient Loading of Angular Material Grid Lists

I managed to design a grid page with the help of angular Material Grid list. Is there a method to combine the Material "Virtual Repeat" feature (Lazy Loading on scroll) with the grid list? This would allow for loading more grids as the user scrolls. Any a ...

Exploring Objects and JSON in React Next.JS: Delving Inside the Object ID

Here is the JSON data I am working with: { "quoteId":"7ab6cb9f-f1a9-4484-aee7-686ba6f7e7a8", "groups":{ "group1":{ "pickup":{ }, "pickupExceptions":[ ], "shipment":{ ...

Loading indicator displayed at the top of a div using JavaScript/jQuery

My current challenge involves implementing a progress bar, similar to the pace.js progress bar. The issue arises when the browser is refreshed, as the pace.js progress bar loads on top of the body instead of within a specified div. It is important that the ...

Retrieving information from a text document by means of data-src with the assistance of jQuery

Trying to extract text from a .txt file using jQuery while utilizing Bootstrap. New to web design with some coding experience. Button in HTML: <button type="button" class="btn btn-primary-outline-btn text-btn" data-toggle="modal ...

Troubleshooting: ReactJS CSS Class Issue

I'm fairly new to working with ReactJS and I've encountered an issue while trying to create a class for a specific form. Below is the code I've written: import React, { Component, PropTypes } from 'react'; import s from './s ...

What is the process for obtaining authorization to access user information?

I am facing a perplexing issue with my app settings. Despite setting everything up correctly, I am unable to authenticate my account on my website using the Javascript SDK. Whenever I try to console.log(me), I only receive public information. Upon furthe ...

StyledTab element unable to receive To or component attributes

Is there a way to use tabs as links within a styled tab component? I've tried using the Tab component syntax with links, but it doesn't seem to work in this scenario: <Tab value="..." component={Link} to="/"> If I have ...

npm is unable to install the package called 'node-sass'

So, I'm running a project with npm start and suddenly encountering the same error in multiple components: Module build failed: Error: Cannot find module 'node-sass' Frustrated, I decide to run 'npm install node-sass', only to be ...

Guide to Installing a Specific Version of Modules in Dependencies for Expo React Native App

For my application, I require a specific version of @expo/config-plugins (6.0.0). I successfully installed it using: npm i @expo/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31525e5f5758561c415d4456585f4271071f">[email ...

I'm struggling to make the jquery parentsUntil function work properly

Would appreciate some help with using the jquery parentsUntil method to hide a button until a radio box is selected. I've been struggling with this for a few days now and can't seem to figure out what I'm doing wrong. Any insights would be g ...