### Install Sober via NPM

Source: https://github.com/unreal-space/sober/blob/main/README.md

Use this command to install the Sober library using npm.

```shell
npm install sober
```

--------------------------------

### Vue.js App Setup with Reactivity

Source: https://github.com/unreal-space/sober/blob/main/test/vue.html

Sets up a Vue 3 application using the Composition API. It initializes a reactive reference 'textRef' and a 'submit' function that logs the value of 'textRef'. This is useful for building interactive user interfaces.

```javascript
import { createApp, ref } from 'https://unpkg.com/vue@3.5.13/dist/vue.esm-browser.prod.js'

const app = createApp({
  setup() {
    const textRef = ref('aa')
    const submit = () => {
      console.log(textRef.value)
    }
    return { textRef, submit }
  }
})

app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('s-')

app.mount('#app')
```

--------------------------------

### Create a Snackbar Message

Source: https://github.com/unreal-space/sober/blob/main/test/components/snackbar.html

Demonstrates how to import and use the Snackbar builder to create a simple message. Attach this to an event listener for user interaction.

```javascript
import { Snackbar } from '../../dist/main.js'
const create = document.querySelector('#create')
create.addEventListener('click', () => {
  Snackbar.builder('你好')
})
```

--------------------------------

### Import Sober Library

Source: https://github.com/unreal-space/sober/blob/main/README.md

Import the Sober library into your JavaScript project.

```javascript
import * as sober from 'sober'
```

--------------------------------

### Include Sober via CDN

Source: https://github.com/unreal-space/sober/blob/main/README.md

Include the Sober library using a CDN link in your HTML file. The library is available in the 'sober' global variable.

```html
<script src="https://unpkg.com/sober/dist/sober.min.js"></script>
<script>
  console.log(sober)
</script>
```

--------------------------------

### Create and Append Text Field

Source: https://github.com/unreal-space/sober/blob/main/test/components/text-field.html

Demonstrates how to create an instance of the s-text-field component, set its value and label, and append it to the DOM after a short delay.

```javascript
const x = document.createElement('s-text-field')
x.value = '射手'
x.label = '请输入内容'
console.log(x)
setTimeout(() => {
  document.querySelector('s-page')?.appendChild(x)
}, 20)
```

--------------------------------

### Use Sober Button Component

Source: https://github.com/unreal-space/sober/blob/main/README.md

Render a basic Sober button component directly in your HTML.

```html
<s-button> Hello Sober </s-button>
```

--------------------------------

### Dynamically Create Sober Button

Source: https://github.com/unreal-space/sober/blob/main/README.md

Create and append a Sober button component to the DOM programmatically using JavaScript. You can set its text content and type.

```javascript
const button = document.createElement('s-button')

button.textContent = 'hello'
button.type = 'outlined'
document.body.appendChild(button)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.