Added Semantic ui via npm + webpack

2017-11-10 14:41:57 +01:00 · 2017-11-10 14:41:57 +01:00 · 20ef5760d8
parent 0359eae183
commit 20ef5760d8
5 changed files with 17 additions and 2 deletions
--- a/frontend/build/webpack.base.conf.js
+++ b/frontend/build/webpack.base.conf.js
@ -24,6 +24,7 @@ module.exports = {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
+      'semantic': path.resolve(__dirname, '../node_modules/semantic-ui-css/semantic.min.js')
    }
  },
  module: {
@ -74,3 +75,11 @@ module.exports = {
    ]
  }
 }
+
+new webpack.ProvidePlugin({
+  // jquery
+  $: 'jquery',
+  jQuery: 'jquery',
+  // semantic-ui
+  semantic: 'semantic-ui-css',
+})
--- a/frontend/index.html
+++ b/frontend/index.html
@ -7,8 +7,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <title>Books</title>
-
-    <link rel="stylesheet" type="text/css" href="http://localhost:8082/assets/semantic-ui/semantic.min.css">
  </head>
  <body>
    <div id="app"></div>
--- a/frontend/package.json
+++ b/frontend/package.json
@ -12,6 +12,8 @@
  },
  "dependencies": {
    "axios": "^0.17.0",
+    "jquery": "^3.2.1",
+    "semantic-ui-css": "^2.2.12",
    "vue": "^2.5.2",
    "vue-awesome": "^2.3.4",
    "vue-paginate": "^3.5.1",
--- a/frontend/src/components/Books.vue
+++ b/frontend/src/components/Books.vue
@ -1,10 +1,12 @@
 <template>
  <div v-if="user.authenticated">
    <h1>{{ booksTitle }}</h1>
+
    <div class="ui info message" v-if="loading">
      <icon name="refresh" spin></icon>&nbsp;&nbsp;
      Loading...
    </div>
+
    <div class="ui negative message" v-if="error">
      <div class="header">
        An erro occured.
@ -14,6 +16,7 @@
      {{ error.response.Message }}
      </div>
    </div>
+
    <div v-if="!loading">
      <form id="search">
        <div class="ui icon input">
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@ -5,6 +5,9 @@ import App from './App'
 import router from './router'
 import auth from './auth'

+// Semantic UI
+import '../node_modules/semantic-ui-css/semantic.min.css'
+
 // Grid import
 import Grid from './components/Grid'
 // Font-awesome icons import