Bounce UI for Vue

Getting Started

Info

The npm package for Bounce UI Vue will be released soon

First, download the umd file and the css file for Bounce UI.

Here is some example code to get you started, no download required!

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bounce-ui-vue@latest/dist/bounce_ui.css">
      <title>Bounce UI</title>
   </head>
   <body>
      <div id="app">
         <b-app>
            <b-container>
               <h1>{{heading}}</h1>
               <br>
               <b-btn @click="$toggleTheme()" color="primary">Toggle Theme</b-btn>
               <br><br>
               <b-input v-model="heading"></b-input>
            </b-container>
         </b-app>
      </div>
   </body>
   <script src="https://unpkg.com/vue@next"></script>
   <script src="https://cdn.jsdelivr.net/npm/bounce-ui-vue@latest/dist/bounce_ui.umd.min.js"></script>
   <script defer>
      const App = {
        data() {
          return {
            heading:"Bounce UI ready!"
          }
        }
      }
      
      const app = Vue.createApp(App);
      app.use(bounce_ui.default);
      app.mount('#app');
   </script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

View and fork this example hereopen in new window

All set up? Check out Components

# Bounce UI for Vue

# Getting Started

Bounce UI for Vue

Getting Started