semantic-ui-vue
Advanced tools
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 status here.
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, or submit an issue (it doesn't have to be a bug). Read the CONTRIBUTING.md for more details
The Semantic UI Vue package can be installed via NPM:
$ npm install semantic-ui-vue --save
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:
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:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- head -->
</head>
<body>
<div id="app"></div>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script src="node_modules/semantic-ui-vue/dist/umd/semantic-ui-vue.min.js"></script>
<script>
Vue.use(SemanticUIVue);
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
template: '<span><sui-button primary>click me</sui-button>{{message}}</span>'
});
</script>
</body>
</html>
Or, in alternative, you can import it using a CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://unpkg.com/semantic-ui-vue/dist/umd/semantic-ui-vue.min.js"></script>
Now you are ready to go! Check out the components' examples to see how to use them.
You can use the default Semantic UI stylesheet by including a Semantic UI CDN link in yourindex.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.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css">
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.
$ npm install semantic-ui-css --save
After install, you'll need to include the minified CSS file in your index.js file:
import 'semantic-ui-css/semantic.min.css';
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.
$ npm install semantic-ui --save-dev
After building the project with Gulp, you'll need to include the minified CSS file in your index.js file:
import '../semantic/dist/semantic.min.css';
You can use semantic-ui-vue as nuxt.js module
Usage:
{
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
]
}
FAQs
Semantic-UI Vue integration
The npm package semantic-ui-vue receives a total of 1,015 weekly downloads. As such, semantic-ui-vue popularity was classified as popular.
We found that semantic-ui-vue demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The Latio podcast explores how static and runtime reachability help teams prioritize exploitable vulnerabilities and streamline AppSec workflows.
Security News
The latest Opengrep releases add Apex scanning, precision rule tuning, and performance gains for open source static code analysis.
Security News
npm now supports Trusted Publishing with OIDC, enabling secure package publishing directly from CI/CD workflows without relying on long-lived tokens.