migration: bootstrap-vue to bootstrap-vue-next

This commit is contained in:
axolotle 2024-03-13 18:16:05 +01:00
parent ccc7298213
commit 1f45899d4b
7 changed files with 34 additions and 30 deletions

View file

@ -17,7 +17,8 @@
"@fontsource/firago": "^5.0.7", "@fontsource/firago": "^5.0.7",
"@vuelidate/core": "^2.0.3", "@vuelidate/core": "^2.0.3",
"@vuelidate/validators": "^2.0.4", "@vuelidate/validators": "^2.0.4",
"bootstrap-vue": "^2.23.1", "bootstrap": "^5.3.3",
"bootstrap-vue-next": "^0.16.6",
"date-fns": "^3.3.1", "date-fns": "^3.3.1",
"fork-awesome": "^1.2.0", "fork-awesome": "^1.2.0",
"simple-evaluate": "^1.4.6", "simple-evaluate": "^1.4.6",
@ -29,15 +30,13 @@
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^5.0.4", "@vitejs/plugin-vue": "^5.0.4",
"bootstrap": "^4.6.0",
"eslint": "^8.57.0", "eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3", "eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-vue": "^9.22.0", "eslint-plugin-vue": "^9.22.0",
"popper.js": "^1.16.0",
"portal-vue": "^2.1.7",
"prettier": "^3.2.5", "prettier": "^3.2.5",
"sass": "^1.71.1", "sass": "^1.71.1",
"unplugin-vue-components": "^0.26.0",
"vite": "^5.1.4" "vite": "^5.1.4"
}, },
"browserslist": [ "browserslist": [

View file

@ -190,11 +190,6 @@ export default {
} }
</script> </script>
<style lang="scss">
// Global import of Bootstrap and custom styles
@import '@/scss/main.scss';
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
// generic style for <html>, <body> and <#app> is in `scss/main.scss` // generic style for <html>, <body> and <#app> is in `scss/main.scss`
header { header {

View file

@ -2,7 +2,7 @@
// Implementation of the feed pattern // Implementation of the feed pattern
// https://www.w3.org/WAI/ARIA/apg/patterns/feed/ // https://www.w3.org/WAI/ARIA/apg/patterns/feed/
import { h } from 'vue' import { h } from 'vue'
import { BCardGroup } from 'bootstrap-vue' import { BCardGroup } from 'bootstrap-vue-next'
export default { export default {
name: 'CardDeckFeed', name: 'CardDeckFeed',

View file

@ -1,6 +1,6 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import BootstrapVue from 'bootstrap-vue' import { createBootstrap } from 'bootstrap-vue-next'
import { VueShowdownPlugin } from 'vue-showdown' import { VueShowdownPlugin } from 'vue-showdown'
import store from './store' import store from './store'
@ -10,6 +10,8 @@ import i18n from './i18n'
import { registerGlobalErrorHandlers } from './api' import { registerGlobalErrorHandlers } from './api'
import { initDefaultLocales } from './i18n/helpers' import { initDefaultLocales } from './i18n/helpers'
import '@/scss/main.scss'
const app = createApp({ const app = createApp({
...App, ...App,
}) })
@ -18,12 +20,7 @@ app.use(store)
app.use(router) app.use(router)
app.use(i18n) app.use(i18n)
// Styles are imported in `src/App.vue` <style> app.use(createBootstrap())
app.use(BootstrapVue, {
BSkeleton: { animation: 'none' },
BAlert: { show: true },
BBadge: { pill: true },
})
app.use(VueShowdownPlugin, { app.use(VueShowdownPlugin, {
flavor: 'github', flavor: 'github',

View file

@ -25,6 +25,8 @@
// For exemple, turning rounding of elements off, the bases colors, etc. // For exemple, turning rounding of elements off, the bases colors, etc.
// $enable-rounded: false; // $enable-rounded: false;
@import '~bootstrap/scss/functions.scss';
$font-size-base: 0.9rem; $font-size-base: 0.9rem;
$font-weight-bold: 500; $font-weight-bold: 500;
@ -123,11 +125,12 @@ $custom-checkbox-indicator-icon-indeterminate: get-checkbox-icon-indeterminate(
); );
// Import default variables after the above setup to compute all other variables. // Import default variables after the above setup to compute all other variables.
@import '~bootstrap/scss/functions.scss';
@import '_functions-override.scss'; @import '_functions-override.scss';
@import '~bootstrap/scss/variables'; @import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins.scss'; @import '~bootstrap/scss/variables-dark';
@import '~bootstrap-vue/src/variables'; @import '~bootstrap/scss/maps';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/utilities';
$hr-border-color: $gray-200; $hr-border-color: $gray-200;

View file

@ -7,11 +7,11 @@
// Dependencies SCSS imports // Dependencies SCSS imports
// `~` allow to import a node_modules folder (resolved by Webpack) // `~` allow to import a node_modules folder (resolved by Webpack)
// @import "~bootstrap/scss/root"; @import '~bootstrap/scss/root';
@import '~bootstrap/scss/reboot'; @import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/type'; @import '~bootstrap/scss/type';
@import '~bootstrap/scss/images'; @import '~bootstrap/scss/images';
@import '~bootstrap/scss/code'; @import '~bootstrap/scss/containers';
@import '~bootstrap/scss/grid'; @import '~bootstrap/scss/grid';
@import '~bootstrap/scss/tables'; @import '~bootstrap/scss/tables';
@import '~bootstrap/scss/forms'; @import '~bootstrap/scss/forms';
@ -19,18 +19,15 @@
@import '~bootstrap/scss/transitions'; @import '~bootstrap/scss/transitions';
@import '~bootstrap/scss/dropdown'; @import '~bootstrap/scss/dropdown';
@import '~bootstrap/scss/button-group'; @import '~bootstrap/scss/button-group';
@import '~bootstrap/scss/input-group';
@import '~bootstrap/scss/custom-forms';
@import '~bootstrap/scss/nav'; @import '~bootstrap/scss/nav';
@import '~bootstrap/scss/navbar'; @import '~bootstrap/scss/navbar';
@import '~bootstrap/scss/card'; @import '~bootstrap/scss/card';
// @import "~bootstrap/scss/accordion";
@import '~bootstrap/scss/breadcrumb'; @import '~bootstrap/scss/breadcrumb';
// @import "~bootstrap/scss/pagination"; // @import "~bootstrap/scss/pagination";
@import '~bootstrap/scss/badge'; @import '~bootstrap/scss/badge';
// @import "~bootstrap/scss/jumbotron";
@import '~bootstrap/scss/alert'; @import '~bootstrap/scss/alert';
@import '~bootstrap/scss/progress'; @import '~bootstrap/scss/progress';
// @import "~bootstrap/scss/media";
@import '~bootstrap/scss/list-group'; @import '~bootstrap/scss/list-group';
@import '~bootstrap/scss/close'; @import '~bootstrap/scss/close';
// @import "~bootstrap/scss/toasts"; // @import "~bootstrap/scss/toasts";
@ -39,10 +36,16 @@
@import '~bootstrap/scss/popover'; @import '~bootstrap/scss/popover';
// @import "~bootstrap/scss/carousel"; // @import "~bootstrap/scss/carousel";
@import '~bootstrap/scss/spinners'; @import '~bootstrap/scss/spinners';
@import '~bootstrap/scss/utilities'; @import '~bootstrap/scss/offcanvas';
// @import "~bootstrap/scss/print"; @import '~bootstrap/scss/placeholders';
@import '~bootstrap-vue/src/index.scss'; // Helpers
@import '~bootstrap/scss/helpers';
// Utilities
@import '~bootstrap/scss/utilities/api';
@import '~bootstrap-vue-next/src/styles/styles.scss';
// Import fonts // Import fonts
@import 'font'; @import 'font';

View file

@ -2,6 +2,8 @@ import { fileURLToPath, URL } from 'url'
import { defineConfig, loadEnv } from 'vite' import { defineConfig, loadEnv } from 'vite'
import fs from 'fs' import fs from 'fs'
import createVuePlugin from '@vitejs/plugin-vue' import createVuePlugin from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { BootstrapVueNextResolver } from 'unplugin-vue-components/resolvers'
import supportedLocales from './src/i18n/supportedLocales' import supportedLocales from './src/i18n/supportedLocales'
@ -46,7 +48,12 @@ export default defineConfig(({ command, mode }) => {
}, },
}, },
}, },
plugins: [createVuePlugin()], plugins: [
createVuePlugin(),
Components({
resolvers: [BootstrapVueNextResolver()],
}),
],
build: { build: {
rollupOptions: { rollupOptions: {
output: { output: {