npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@pitcher/semantic-ui-vue

v0.9.1

Published

Semantic-UI Vue integration

Downloads

6

Readme

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

🚀 Installation

JavaScript

The Semantic UI Vue package can be installed via NPM/Yarn:

$ 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:

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/commonjs/semantic-ui-vue.js"></script>

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

<link
  rel="stylesheet"
  href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
/>

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.

$ 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:

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.

$ 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:

import '../semantic/dist/semantic.min.css';

Nuxt.js module

You can use semantic-ui-vue as 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:
{
  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, or submit an issue (it doesn't have to be a bug). Read the CONTRIBUTING.md for more details

📝 License

Copyright © 2019-present, Mario Lamacchia. This project is MIT licensed.