### Using the vue-selectposition Component in Vue

Source: https://github.com/bananaacid/vue-selectposition/blob/master/README.md

This snippet demonstrates how to import and use the vue-selectposition component within a Vue template and script. It shows how to handle the '@changed' event and set an initial value using the ':preselected' prop.

```html
<template>
    <select-position @changed="doValue" :static="true" :preselected="initialValue" size="25px" />
</template>
```

```javascript
<script>
    import selectposition from 'selectPosition';
    Vue.component('select-position', selectposition);
</script>
```

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

### Customizing vue-selectposition Colors with CSS Variables

Source: https://github.com/bananaacid/vue-selectposition/blob/master/README.md

This CSS block defines custom properties (CSS variables) that can be used to override the default colors and styling of the vue-selectposition component. This is particularly useful if not using Framework7, which provides default values.

```css
[data-selectpostion] {
    --sp-default-border-size: 1px;
    --sp-default-border-color: var(--f7-button-border-color, var(--f7-theme-color));
    --sp-default-bg: var(--f7-block-strong-bg-color);
    --sp-selected-border-size: 1px;
    --sp-selected-border-color: var(--f7-button-fill-bg-color, var(--f7-theme-color));
    --sp-selected-bg: var(--f7-button-fill-bg-color, var(--f7-theme-color));
    --sp-hover-border-size: 1px;
    --sp-hover-border-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-tint));
    --sp-hover-bg: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-tint));
    --sp-default-border-radius: var(--f7-button-border-radius);
}
```

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