Merge pull request #2 from martinussuherman/dev-vite

Use vite for development
martinussuherman · Feb 28, 2021 · 7703d58 · 7703d58
2 parents 462f961 + f6fa94e
commit 7703d58
Show file tree

Hide file tree

Showing 11 changed files with 75 additions and 37 deletions.
diff --git a/public/404.html → 404.html b/public/404.html → 404.html
@@ -5,21 +5,21 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <link rel="icon" href="/favicon.ico">
   <title>
-    <%= htmlWebpackPlugin.options.title %>
+    Demo Vue Oidc
   </title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
 </head>
 
 <body>
   <noscript>
-    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+    <strong>We're sorry but Demo Vue Oidc doesn't work properly without JavaScript enabled.
         Please enable it to continue.</strong>
   </noscript>
   <div id="app"></div>
-  <!-- built files will be auto injected -->
+  <script type="module" src="/src/main.ts"></script>
 </body>
 
 </html>
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -5,21 +5,21 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <link rel="icon" href="/favicon.ico">
   <title>
-    <%= htmlWebpackPlugin.options.title %>
+    Demo Vue Oidc
   </title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
 </head>
 
 <body>
   <noscript>
-    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+    <strong>We're sorry but Demo Vue Oidc doesn't work properly without JavaScript enabled.
         Please enable it to continue.</strong>
   </noscript>
   <div id="app"></div>
-  <!-- built files will be auto injected -->
+  <script type="module" src="/src/main.ts"></script>
 </body>
 
 </html>
diff --git a/package.json b/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "tsc --noEmit && vite",
+    "build": "vite build",
+    "serve": "vite preview"
   },
   "dependencies": {
     "core-js": "^3.8.3",
@@ -16,31 +16,24 @@
     "vue-router": "^3.5.1",
     "vuetify": "^2.4.0",
     "vuex": "^3.6.2",
-    "vuex-module-decorators": "^1.0.1",
     "vuex-oidc": "^3.10.2"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "^2.34.0",
-    "@vue/cli-plugin-babel": "~4.5.11",
-    "@vue/cli-plugin-eslint": "~4.5.11",
-    "@vue/cli-plugin-router": "~4.5.11",
-    "@vue/cli-plugin-typescript": "~4.5.11",
-    "@vue/cli-plugin-vuex": "~4.5.11",
-    "@vue/cli-service": "~4.5.11",
-    "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/eslint-config-prettier": "6.0.0",
     "@vue/eslint-config-typescript": "^5.1.0",
     "eslint": "^6.8.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.3.1",
-    "eslint-plugin-standard": "^4.1.0",
+    "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^6.2.2",
+    "prettier": "2.2.1",
     "sass": "^1.32.7",
     "sass-loader": "^10.0.0",
     "typescript": "~4.1.5",
-    "vue-cli-plugin-vuetify": "~2.1.0",
+    "vite": "^2.0.2",
+    "vite-plugin-vue2": "^1.2.1",
     "vue-template-compiler": "^2.6.12",
-    "vuetify-loader": "^1.7.0"
+    "vuetify-loader": "^1.7.0",
+    "webpack": "^5.0.0"
   }
 }
diff --git a/public/silent-renew-oidc.html → silent-renew-oidc.html b/public/silent-renew-oidc.html → silent-renew-oidc.html
@@ -4,6 +4,6 @@
     <meta charset="utf-8">
   </head>
   <body>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/silent-renew-oidc.ts"></script>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -93,9 +93,27 @@ import { Component, Vue } from 'vue-property-decorator'
 import { VuexOidcStoreActions } from 'vuex-oidc'
 import { User } from 'oidc-client'
 import { OidcCustomEventInit } from '@/helper/oidc'
+import { VApp, VAppBar, VAppBarNavIcon, VMain, VIcon, VImg, VSpacer, VBtn, VNavigationDrawer, VList, VListItemGroup, VListItem, VListItemTitle, VListItemIcon, VSwitch } from 'vuetify/lib'
 
 /** https://stackoverflow.com/questions/60099323/how-to-use-mapactions-with-vue-typescript-class-component */
 @Component({
+  components: {
+    VApp,
+    VAppBar,
+    VAppBarNavIcon,
+    VMain,
+    VIcon,
+    VImg,
+    VSpacer,
+    VBtn,
+    VNavigationDrawer,
+    VList,
+    VListItemGroup,
+    VListItem,
+    VListItemTitle,
+    VListItemIcon,
+    VSwitch
+  },
   computed: {
     ...mapGetters(
       'oidcStore',

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -93,8 +93,17 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
+import { VContainer, VRow, VCol, VImg } from 'vuetify/lib'
+
+@Component({
+  components: {
+    VContainer,
+    VRow,
+    VCol,
+    VImg
+  }
+})
 
-@Component
 export default class HelloWorld extends Vue {
   @Prop() private msg!: string;
 

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -1,12 +1,12 @@
 import Vue from 'vue'
 import VueRouter, { NavigationGuard, Route, RouteConfig } from 'vue-router'
 import { vuexOidcCreateRouterMiddleware } from 'vuex-oidc'
-import { configureVuexStore } from '@/store'
-import Home from '@/views/Home.vue'
-import About from '@/views/About.vue'
-import OidcCallback from '@/views/OidcCallback.vue'
-import OidcPopupCallback from '@/views/OidcPopupCallback.vue'
-import OidcCallbackError from '@/views/OidcCallbackError.vue'
+import { configureVuexStore } from '../store'
+import Home from '../views/Home.vue'
+import About from '../views/About.vue'
+import OidcCallback from '../views/OidcCallback.vue'
+import OidcPopupCallback from '../views/OidcPopupCallback.vue'
+import OidcCallbackError from '../views/OidcCallbackError.vue'
 
 interface VuexOidcRouteMeta {
   isPublic?: boolean;
@@ -71,7 +71,8 @@ export async function configureRouter () {
 
   const router = new VueRouter({
     mode: 'history',
-    base: process.env.BASE_URL,
+    // @ts-ignore - Vite exposes env variables on the special import.meta.env object
+    base: import.meta.env.BASE_URL,
     routes
   })
 

diff --git a/src/store/oidc.ts b/src/store/oidc.ts
@@ -1,5 +1,5 @@
 import { vuexOidcCreateStoreModule, VuexOidcStoreSettings, VuexOidcStoreListeners } from 'vuex-oidc'
-import { getRuntimeOidcConfig } from '@/config/oidc'
+import { getRuntimeOidcConfig } from '../config/oidc'
 
 // NOTE: If you want to customize how tokens are stored you can use WebStorageStateStore from oidc-client (see bellow)
 // Default storage is window.localStorage

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -4,7 +4,7 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
+import HelloWorld from '../components/HelloWorld.vue'
 
 @Component({
   components: {

diff --git a/tsconfig.json b/tsconfig.json
@@ -13,7 +13,6 @@
     "sourceMap": true,
     "baseUrl": ".",
     "types": [
-      "webpack-env"
     ],
     "paths": {
       "@/*": [

diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite'
+import { createVuePlugin } from 'vite-plugin-vue2'
+import { resolve } from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/demo-vue-oidc/',
+  plugins: [createVuePlugin(/*options*/)],
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+        notFound: resolve(__dirname, '404.html'),
+        oidcRenew: resolve(__dirname, 'silent-renew-oidc.html')
+      }
+    }
+  }
+})