vue3 + Bootstrap5

user1@amebb:~/acre/air$ vue create boot


Vue CLI v5.0.4
? Please pick a preset: Default ([Vue 3] babel, eslint)


Vue CLI v5.0.4
✨  Creating project in /home/user1/acre/air/boot.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 842 packages in 4m
🚀  Invoking generators...
📦  Installing additional dependencies...


added 95 packages in 27s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project boot.
👉  Get started with the following commands:

 $ cd boot
 $ npm run serve

 WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit.
       You will need to perform the initial commit yourself.

user1@amebb:~/acre/air/boot$ npm install bootstrap
user1@amebb:~/acre/air/boot$ npm install @popperjs/core

import { createApp } from 'vue'
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"

createApp(App).mount('#app')

<template>
  <h1>Boot Buttons.</h1>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>

  <h2>Toggle sample</h2>
  <div>
    <button class="btn btn-primary" data-bs-target="#collapseTarget" data-bs-toggle="collapse"> Bootstrap collapse</button>
    <div class="collapse py-2" id="collapseTarget"> This is the toggle-able content! </div>
  </div>
</template>

<script>
export default {
  name: 'BootButtons',
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  margin: 20px 0 0;
}
</style>

<template>
  <BootButtons />
  <HelloWorld msg="Welcome-0501-1719 Vue.js App"/>
  <img alt="Vue logo" src="./assets/logo.png">
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import BootButtons from './components/BootButtons.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    BootButtons
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

user1@amebb:~/acre/air/boot$ npm run serve