Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Semantic-UI-Vue/Semantic-UI-Vue
Semantic UI integration for Vue
https://github.com/Semantic-UI-Vue/Semantic-UI-Vue
components semantic-ui semantic-ui-vue vue vue-components vue2 vuejs2
Last synced: about 1 month ago
JSON representation
Semantic UI integration for Vue
- Host: GitHub
- URL: https://github.com/Semantic-UI-Vue/Semantic-UI-Vue
- Owner: Semantic-UI-Vue
- License: mit
- Created: 2017-08-25T10:11:54.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T20:30:18.000Z (over 1 year ago)
- Last Synced: 2024-05-16T03:49:24.727Z (4 months ago)
- Topics: components, semantic-ui, semantic-ui-vue, vue, vue-components, vue2, vuejs2
- Language: JavaScript
- Homepage: https://semantic-ui-vue.github.io
- Size: 4.79 MB
- Stars: 935
- Watchers: 34
- Forks: 149
- Open Issues: 142
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
Semantic UI Vue
Website
·
Installation
·
Configuration (TBD)
Looking for maintainers!
There is a lot to do and few maintainers with little time :). If you'd like to help with this project, please let us know.
Semantic UI Vue is the Vue integration for Semantic UI. It is highly inspired on Semantic UI React
If you have used it already, you will find Semantic UI Vue's API to be almost the same. Semantic UI Vue is still **under heavy development**. Please, feel free to contribute. You can see the feature completion state [here](https://semantic-ui-vue.github.io/#/features)
## 🚀 Installation
### JavaScript
The Semantic UI Vue package can be installed via NPM/Yarn:
```bash
$ npm install semantic-ui-vue
# or
$ yarn add semantic-ui-vue
```
Installing Semantic UI Vue provides the JavaScript for your components. You'll also need to include a stylesheet to provide the styling for your components.
Once Semantic UI Vue has been installed, you will need to import it in your main file (usually `index.js` or `main.js`) and tell Vue to use it:
```js
import Vue from 'vue';
import SuiVue from 'semantic-ui-vue';
/* ... */
Vue.use(SuiVue);
```
If you are not using Webpack, you can add the script in your html:
```html
Vue.use(SemanticUIVue);
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
},
template:
'<span><sui-button primary>click me</sui-button>{{message}}</span>',
});
```
Or, in alternative, you can import it using a CDN:
```html
```
Now you are ready to go! Check out the components' examples to see how to use them.
### CSS
#### Content Delivery Network (CDN)
You can use the default Semantic UI stylesheet by including a Semantic UI CDN link in your `index.html` file.
This is the quickest way to get started with Semantic UI Vue. You **won't be able to use custom themes** with this method.
> **To avoid unexpected behavior please use only the latest version of Semantic-UI**
```html
```
#### Semantic UI CSS package
The Semantic UI CSS package is automatically synced with the main Semantic UI repository to provide a lightweight CSS only version of Semantic UI.
Semantic UI CSS can be installed as a package in your project using NPM. You **won't be able to use custom themes** with this method.
```bash
$ npm install semantic-ui-css --save
# or
$ yarn add semantic-ui-css
```
After install, you'll need to include the minified CSS file in your index.js file:
```js
import 'semantic-ui-css/semantic.min.css';
```
#### Semantic UI package
Install the full Semantic UI package.
Semantic UI includes Gulp build tools so your project can preserve its own theme changes, allowing you to customize the style variables.
Detailed documentation on theming in Semantic UI is provided [here](https://semantic-ui.com/usage/theming.html).
```bash
$ npm install semantic-ui --save-dev
# or
$ yarn add semantic-ui
```
After building the project with Gulp, you'll need to include the minified CSS file in your index.js file:
```js
import '../semantic/dist/semantic.min.css';
```
### Nuxt.js module
You can use semantic-ui-vue as [nuxt.js](https://github.com/nuxt/nuxt.js) module.
Usage:
- Install semantic-ui-vue and semantic-ui-css packages
- Install semantic-ui-vue and semantic-ui-css packages
- Add this into your nuxt.config.js file:
```js
{
modules: [
'semantic-ui-vue/nuxt', // includes styles from semantic-ui-css
['semantic-ui-vue/nuxt', { css: false }], // if you have your own semantic-ui styles
];
}
```
## 🤝 Contact us!
Do you have a question? Do you want to submit a bug, or suggest an improvement?
Please contact us! Especially at this stage, we really need this.
To do so, do not hesitate to [join our chat on Gitter](https://gitter.im/Semantic-UI-Vue/Lobby), or [submit an issue](https://github.com/Semantic-UI-Vue/Semantic-UI-Vue/issues/new) (it doesn't have to be a bug). Read the [CONTRIBUTING.md](https://github.com/Semantic-UI-Vue/Semantic-UI-Vue/blob/master/CONTRIBUTING.md) for more details
## 📝 License
Copyright © 2019-present, [Mario Lamacchia](https://github.com/mariolamacchia).
This project is [MIT](https://github.com/Semantic-UI-Vue/Semantic-UI-Vue/blob/master/LICENSE.md) licensed.