A guide to implementing Quasar Framework and/or Vue3 using Bun.js

After using the bun create [..] command to easily create a react and a next project by following the instructions on the bun git repository (note: additional instructions are available at bun.sh), I encountered a problem with setting up quasar/vue.

While I was able to successfully install quasar using bun:

bun install -g @quasar/cli

The issue arose when I attempted to create a quasar project:

quasar create [..]

This resulted in an error message:

  • /usr/bin/env: ‘node’: Permission denied
  • /usr/bin/env: ‘node’: No such file or directory

It seems like quasar is trying to use the node executable instead of bun.

Does anyone have any suggestions on how to make it work with quasar/vue?

javascriptvue.jsquasar-frameworkquasarbun

Answer №1

One issue at hand is the absence of certain packages in Bun.js, such as readline. Further information can be found here.

bun --bun run quasar

Executing the above command runs smoothly and produces an output.

bun --bun run quasar build

However, running this command results in the following error:

error: Cannot locate the package "readline" from "/home/<user>/<project>/node_modules/@quasar/app-vite/lib/helpers/logger.js"
error: "quasar" ended with code 1 (SIGHUP)

It appears that we may need to wait for a stable version 1.0 for a resolution.

Update 18.01.2023

With the release of Bun v0.5.0, progress towards the goal is being made. Unfortunately, the lack of worker_threads support is still causing the quasar build to fail.

quasar build output

Answer №2

Check out the ongoing discussion thread on the Quasar repository. The creator of Quasar, Razvan Stoenescu, has also reported a bug related to this topic, suggesting that tested support may be available in the coming months.

Update

According to a response from Razvan Stoenescu:

Support will be included in q/app-vite v1.6 & q/app-webpack v3.11 (backported from upcoming major CLIs version -- not yet released)

Update 2

Starting from CLI v2.3.0, Quasar now supports Bun as a package manager. Details can be found at: https://github.com/quasarframework/quasar/releases/tag/%40quasar%2Fcli-v2.3.0

Answer №3

When using bun 1.0.3 on a system that does not have node installed, you can follow these steps to create a quasar project:

bun install -g @quasar/cli && bun create quasar

If you want to run quasar without node, simply add bun run before the command:

bun run quasar build

In case you have node installed but prefer not to use it, you must utilize the --bun flag to enforce the use of bun over node:

bun create --bun quasar
bun run --bun quasar build

For systems without node, --bun appears to be the default setting.

To simplify the process, create an alias or function in your shell's .rc file:

function quasar() {
  # option A - "do not use node under any circumstances":
  # bun run --bun quasar "${@}"
  # option B - "node is fine to use when I have it"
  bun run quasar "${@}"
}

After creating the alias, either restart your shell or source it:

# bash
source ~/.bashrc
# zsh
source ~/.zshrc
# etc...

You can now run quasar's CLI using bun as you normally would:

quasar build

If you encounter any issues with certain commands, refer to the compatibility tracker.

It is officially confirmed that @quasar/cli-v2.30, @quasar/app-webpack-v3.11.0, and @quasar/app-vite-v1.6.0 from the quasar side fully support bun!

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

Top solution for efficiently capturing and storing user input in a React JS application: Event Handler

I've recently designed an input field for inputting details of items. In order to effectively capture and save the entered information, which of the following event handlers would be most suitable? onClick onChange onLoad onKeyPress ...

javascriptreactjstextboxevent-handlingmern

Utilize CSS to break apart text (text = white space = text) and align text in a floating manner, allowing

Is there a way to use CSS to create a white space in the middle of text? Currently, I am manually breaking the text, which is not ideal. I am aware that there is a function that allows the text to end and start in another div, but unfortunately, it is not ...

javascripthtmlcsstextstyling

JavaScript code to find a date within a specified range

I have developed a script that calculates the number of weeks between two specified dates. It then generates a table where the number of rows equals the number of weeks. The script can be viewed on JSFIDDLE Script: $('#test').click(function ...

javascriptjquerydate

Include the url of the html file in your JavaScript code

I have a piece of code that I want to include in my JavaScript instead of HTML. The code is as follows: <script async src="https://www.googletagmanager.com/gtag/js?id=ID"></script> Since all my functions are written in JavaScript, I ...

javascripthtml

axios: prevent automatic sorting of objects according to keys

When using axios, I am receiving an API response. To send the sorted API response based on name, I use the following endpoint: http://localhost:8000/api/ingredients/ordering=name The actual object received from my server looks like this: { 2:{"id":2 ...

javascriptajaxreactjsaxios

Using the `ng-if` directive in Angular to check for the

I need to output data in JSON format using items. To display a single item, I utilize ng-repeat="item in items". Additionally, I can access the user object of the currently logged-in user with user. Every item has the ability to belong to multiple wishlis ...

javascriptjsonangularjs

Strategies for effectively searching and filtering nested arrays

I'm facing a challenge with filtering an array of objects based on a nested property and a search term. Here is a sample array: let items = [ { category: 15, label: "Components", value: "a614741f-7d4b-4b33-91b7-89a0ef96a0 ...

javascriptarraystypescriptobjectecmascript-6

Discovering intersections between Polylines on Google Maps - a comprehensive guide

I'm currently developing a project involving a unique twist on Google Maps, focusing exclusively on natural hiking paths. My routes are built using GPX files converted into Google Maps polylines. Is there an efficient way to identify the intersection ...

javascriptpythonjsongoogle-mapspolyline

What are the steps for creating a standalone build in nextJS?

Currently, I am undertaking a project in which nextJS was chosen as the client-side tool. However, I am interested in deploying the client as static code on another platform. Upon generating a build, a folder with all the proprietary server elements of ne ...

javascripttypescriptnext.jsfrontendvercel

Export default does not actually yield a function; rather, it returns an object

I recently developed a function that is responsible for importing a script from a specified source, calling its exported function, and handling the returned result. To simplify things, I have streamlined the code to focus solely on returning the result. co ...

javascriptnode.js

Is there a way to show additional information beyond just the title in FullCalendar?

Hello, I am currently using the full calendar plugin and have a question. While I can display the title of events on my calendar, I would also like to display additional information from my database (such as full name or description) alongside the title. H ...

javascriptphpmysqlfullcalendarfullcalendar-3

What components and substances are needed for a particle system in Three.js?

After spending a few weeks working with particle systems in Three.js, I initially used an Object3D, incorporating my own Vector3s and various materials like MeshBasicMaterials, Phong, and Lambert. However, after discovering the built-in ParticleSystem obje ...

javascriptopengl-esthree.jsparticle-system

Proper functionality of Chrome Extension chrome.downloads.download

I am currently developing an extension with a feature that allows users to download a file. This file is generated using data retrieved from the localStorage in Chrome. Within my panel.html file, the code looks like this: <!DOCTYPE html> <html&g ...

javascriptgoogle-chromegoogle-chrome-extension

The body of the POST request appears to be void of any

Whenever I make a request using curl or hurl, an issue arises. Despite req.headers['content-length'] showing the correct length and req.headers['content-type'] being accurate, req.body returns as {}. Below is the Hurl test: POST http:/ ...

javascriptnode.jsexpresspost

Is it possible to incorporate vector graphics/icons by simply adding a class to a span element in HTML5?

In order to add a glyphicon icon to our webpage, we simply need to include its class within a span element, as demonstrated here: <span class="glyphicon glyphicon-search"></span> We also have a few files in .ai format that can be converted to ...

javascriptcsshtmltwitter-bootstrapglyphicons

Monitoring individual properties of a model in VueJs

I am currently working on implementing a search method that involves an object (model) as an input field. My goal is to have the watcher detect changes on a per-key basis rather than for all keys simultaneously. At the moment, every time an input is chang ...

vue.jsvuejs2

Issue with Laravel: Validation unique during update process consistently not working

Recently, I encountered a puzzling issue with my update form which includes an image and other data that needs to be updated. I decided to change the default route key from ID to name, and also set up a separate form request for validating requests. Everyt ...

phplaravelvue.jslaravel-5

automatically created button, form control named 'answer' that is not valid

Struggling with a challenge in attaching an event to a dynamically generated button. Despite conducting some research, most of the solutions suggest that this issue is typically related to a form control. However, in my scenario, the error "invalid form co ...

javascriptjqueryhtmlforms

Switching HTML text by clicking or tapping on it

I'm currently working on a website that will showcase lengthy paragraphs containing complicated internal references to other parts of the text. For instance, an excerpt from the original content may read: "...as discussed in paragraph (a) of section ...

javascriptjqueryhtmlcss

Mapping arguments as function values

Hello there, I have an array of objects that I am attempting to map through. const monthObject = { "March 2022": [ { "date": "2022-03-16", "amount": "-50", &q ...

javascriptarraystypescriptarguments