donnierich / vue-3-options-preset

Simple scaffolding for Vite + Vue 3 with options api

Vite + Vue 3 Options API preset

This package update the default Vite + Vue 3 scaffolding installation:

• replacing the use of the Composition API with the Options API
• replacing style.css with styles/general.scss
• adding SASS dependency
• optional: adding Bootstrap dependencies

Installation

To install this package, run the following command in the terminal:

npm install --save-dev vue-3-options-preset

Usage

After the installation, run the following command:

npx preset-options-api

To add Bootstrap along all the other options, add -b at the end of the command:

npx preset-options-api -b

As last step run both:

npm i

npm run dev

NOTE

Use this package only on new projects, right after Vite finished the scaffolding process!

Credits

Badges from shields.io

vue-3-options-preset's Issues

New stubs scaffolding

The scaffolding structure for the stub files should be more organized, with the default files inside a default directory and the bootstrap files inside a bootstrap directory.

Example:

stubs
|
| - default
    | - App.vue
    | - main,js
| - bootstrap
    | - App.vue
    | - main,js

Missing styles import inside main.js

Hey Donny, I think there is a missing import in the main.js file.

Context:

After you install the package running the following command
npm install --save-dev vue-3-options-preset
and then scaffold the preset with the boostrap option
npx preset-options-api -b

Expected result:
I would expect to be able to use bootstrap out of the box

Actual result:
Bootstrap is not available.
I need to add the import in the main.js file to be able to use boostrap.
import './styles/general.scss'

The import should be added to the main.js stub file

vue-3-options-preset/src/stubs/main.js

Line 3 in 5898012

Missing bootstrap JS import in main.js

In the main.js file the import of Bootstrap JS is missing

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'

There should be two versions of main.js:

• without bootstrap imports
• with bootstrap imports