├── .gitignore
├── README.md
├── __screenshots
    ├── login.png
    └── register.png
├── _config.yml
├── babel.config.js
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── renovate.json
├── src
    ├── App.vue
    ├── assets
    │   ├── logo.png
    │   └── particles.json
    ├── components
    │   ├── HelloWorld.vue
    │   ├── Home.vue
    │   ├── Login.vue
    │   └── Register.vue
    └── main.js
├── vue.config.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # tsParticles VueJS Authentication Template
 2 | 
 3 | tsParticles Simple Auth HTML Template for VueJS Web Sites/Applications
 4 | 
 5 | ## Login Page Preview
 6 | [![login](https://raw.githubusercontent.com/tsparticles/vue3-auth-template/main/__screenshots/login.png)](https://tsparticles.github.io/vue3-auth-template/#/login)
 7 | 
 8 | See working preview [here](https://tsparticles.github.io/vue3-auth-template/#/login)
 9 | 
10 | ## Register Page Preview
11 | [![login](https://raw.githubusercontent.com/tsparticles/vue3-auth-template/main/__screenshots/register.png)](https://tsparticles.github.io/vue3-auth-template/#/register)
12 | 
13 | See working preview [here](https://tsparticles.github.io/vue3-auth-template/#/register)
14 | 
15 | ## What is tsParticles
16 | 
17 | [tsParticles](https://github.com/matteobruni/tsparticles) is a lightweight library for easily creating particles animations in your websites or web applications.
18 | 
19 | The [tsParticles](https://github.com/matteobruni/tsparticles) library is ready to be used in standard JavaScript, React, Vue.js, Angular, Svelte, jQuery, Preact, Inferno.
20 | 
21 | ### VueJS tsParticles
22 | 
23 | The VueJS official [tsParticles](https://github.com/matteobruni/tsparticles) library is `particles.vue`.
24 | 
25 | You read more about `particles.vue` [here](https://github.com/matteobruni/tsparticles/blob/master/components/vue/README.md) 
26 | 
27 | ---
28 | 
29 | Want to see more particles demos? [Checkout this collection](https://codepen.io/collection/DPOage)
30 | 
31 | Want to see more templates or want to share yours? [Checkout this README](https://github.com/tsparticles/templates)
32 | 


--------------------------------------------------------------------------------
/__screenshots/login.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsparticles/vue3-auth-template/dd391e93da2bf403baa8026ec8c511329d62370f/__screenshots/login.png


--------------------------------------------------------------------------------
/__screenshots/register.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsparticles/vue3-auth-template/dd391e93da2bf403baa8026ec8c511329d62370f/__screenshots/register.png


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue3-auth-template",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint",
 9 |     "predeploy": "yarn build",
10 |     "deploy": "gh-pages -d dist"
11 |   },
12 |   "dependencies": {
13 |     "core-js": "^3.8.0",
14 |     "particles.vue3": "^2.0.0",
15 |     "vue": "^3.0.3",
16 |     "vue-router": "^4.0.0-rc.6"
17 |   },
18 |   "devDependencies": {
19 |     "@vue/cli-plugin-babel": "^5.0.0",
20 |     "@vue/cli-plugin-eslint": "^5.0.0",
21 |     "@vue/cli-service": "^5.0.0",
22 |     "@vue/compiler-sfc": "^3.0.3",
23 |     "@babel/eslint-parser": "^7.11.0",
24 |     "eslint": "^7.14.0",
25 |     "eslint-plugin-vue": "^7.1.0",
26 |     "gh-pages": "^6.0.0"
27 |   },
28 |   "eslintConfig": {
29 |     "root": true,
30 |     "env": {
31 |       "node": true
32 |     },
33 |     "extends": [
34 |       "plugin:vue/vue3-essential",
35 |       "eslint:recommended"
36 |     ],
37 |     "parserOptions": {
38 |       "parser": "babel-eslint"
39 |     },
40 |     "rules": {}
41 |   },
42 |   "browserslist": [
43 |     "> 1%",
44 |     "last 2 versions",
45 |     "not dead"
46 |   ]
47 | }
48 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsparticles/vue3-auth-template/dd391e93da2bf403baa8026ec8c511329d62370f/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |   <link rel="icon" href="favicon.ico">
 9 |   <title><%= htmlWebpackPlugin.options.title %></title>
10 | </head>
11 | 
12 | <body>
13 |   <noscript>
14 |     <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
15 |       Please enable it to continue.</strong>
16 |   </noscript>
17 |   <div id="app"></div>
18 |   <!-- built files will be auto injected -->
19 | </body>
20 | 
21 | </html>


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
3 |   "extends": [
4 |     "config:base"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="main">
 3 |     <router-view></router-view>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "App",
10 | };
11 | </script>
12 | 
13 | <style>
14 | #main {
15 |   font-family: Avenir, Helvetica, Arial, sans-serif;
16 |   -webkit-font-smoothing: antialiased;
17 |   -moz-osx-font-smoothing: grayscale;
18 |   text-align: center;
19 |   color: #2c3e50;
20 |   margin-top: 60px;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tsparticles/vue3-auth-template/dd391e93da2bf403baa8026ec8c511329d62370f/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/particles.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "fpsLimit": 60,
 3 |     "background": {
 4 |         "color": "#fff"
 5 |     },
 6 |     "fullScreen": {
 7 |         "enable": true
 8 |     },
 9 |     "particles": {
10 |         "number": {
11 |             "value": 50
12 |         },
13 |         "color": {
14 |             "value": [
15 |                 "#3998D0",
16 |                 "#2EB6AF",
17 |                 "#A9BD33",
18 |                 "#FEC73B",
19 |                 "#F89930",
20 |                 "#F45623",
21 |                 "#D62E32",
22 |                 "#EB586E",
23 |                 "#9952CF"
24 |             ]
25 |         },
26 |         "shape": {
27 |             "type": "circle"
28 |         },
29 |         "opacity": {
30 |             "value": 0.5
31 |         },
32 |         "size": {
33 |             "value": 400,
34 |             "random": {
35 |                 "enable": true,
36 |                 "minimumValue": 200
37 |             }
38 |         },
39 |         "move": {
40 |             "enable": true,
41 |             "speed": 10,
42 |             "direction": "top",
43 |             "outMode": "destroy"
44 |         }
45 |     },
46 |     "interactivity": {
47 |         "detectsOn": "canvas",
48 |         "events": {
49 |             "resize": true
50 |         }
51 |     },
52 |     "detectRetina": true,
53 |     "emitters": {
54 |         "direction": "top",
55 |         "position": {
56 |             "x": 50,
57 |             "y": 120
58 |         },
59 |         "rate": {
60 |             "delay": 0.2,
61 |             "quantity": 2
62 |         },
63 |         "size": {
64 |             "width": 100,
65 |             "height": 0
66 |         }
67 |     }
68 | }


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="hello">
  3 |     <h1>{{ msg }}</h1>
  4 |     <p>
  5 |       For a guide and recipes on how to configure / customize this project,<br />
  6 |       check out the
  7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
  8 |         >vue-cli documentation</a
  9 |       >.
 10 |     </p>
 11 |     <h3>Installed CLI Plugins</h3>
 12 |     <ul>
 13 |       <li>
 14 |         <a
 15 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
 16 |           target="_blank"
 17 |           rel="noopener"
 18 |           >babel</a
 19 |         >
 20 |       </li>
 21 |       <li>
 22 |         <a
 23 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
 24 |           target="_blank"
 25 |           rel="noopener"
 26 |           >eslint</a
 27 |         >
 28 |       </li>
 29 |     </ul>
 30 |     <h3>Essential Links</h3>
 31 |     <ul>
 32 |       <li>
 33 |         <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
 34 |       </li>
 35 |       <li>
 36 |         <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
 37 |           >Forum</a
 38 |         >
 39 |       </li>
 40 |       <li>
 41 |         <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
 42 |           >Community Chat</a
 43 |         >
 44 |       </li>
 45 |       <li>
 46 |         <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
 47 |           >Twitter</a
 48 |         >
 49 |       </li>
 50 |       <li>
 51 |         <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
 52 |       </li>
 53 |     </ul>
 54 |     <h3>Ecosystem</h3>
 55 |     <ul>
 56 |       <li>
 57 |         <a href="https://router.vuejs.org" target="_blank" rel="noopener"
 58 |           >vue-router</a
 59 |         >
 60 |       </li>
 61 |       <li>
 62 |         <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
 63 |       </li>
 64 |       <li>
 65 |         <a
 66 |           href="https://github.com/vuejs/vue-devtools#vue-devtools"
 67 |           target="_blank"
 68 |           rel="noopener"
 69 |           >vue-devtools</a
 70 |         >
 71 |       </li>
 72 |       <li>
 73 |         <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
 74 |           >vue-loader</a
 75 |         >
 76 |       </li>
 77 |       <li>
 78 |         <a
 79 |           href="https://github.com/vuejs/awesome-vue"
 80 |           target="_blank"
 81 |           rel="noopener"
 82 |           >awesome-vue</a
 83 |         >
 84 |       </li>
 85 |     </ul>
 86 |   </div>
 87 | </template>
 88 | 
 89 | <script>
 90 | export default {
 91 |   name: "HelloWorld",
 92 |   props: {
 93 |     msg: String,
 94 |   },
 95 | };
 96 | </script>
 97 | 
 98 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 99 | <style scoped>
100 | h3 {
101 |   margin: 40px 0 0;
102 | }
103 | ul {
104 |   list-style-type: none;
105 |   padding: 0;
106 | }
107 | li {
108 |   display: inline-block;
109 |   margin: 0 10px;
110 | }
111 | a {
112 |   color: #42b983;
113 | }
114 | </style>
115 | 


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <img alt="Vue logo" src="../assets/logo.png" />
 4 |     <HelloWorld msg="Welcome to Your Vue.js App" />
 5 |     <!-- component matched by the route will render here -->
 6 |     <router-link to="/login">Go to Login view</router-link>
 7 |     <router-link to="/register">Go to Register view</router-link>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import HelloWorld from "./HelloWorld";
13 | 
14 | export default {
15 |   name: "Home",
16 |   components: {
17 |     HelloWorld,
18 |   },
19 | };
20 | </script>
21 | 
22 | <style scoped>
23 | </style>


--------------------------------------------------------------------------------
/src/components/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <Particles id="tsparticles" :options="particlesConfig" />
  4 | 
  5 |     <main class="box">
  6 |       <h2>Login</h2>
  7 |       <form>
  8 |         <div class="inputBox">
  9 |           <label for="userName">Username</label>
 10 |           <input
 11 |             type="text"
 12 |             name="userName"
 13 |             id="userName"
 14 |             placeholder="type your username"
 15 |             required
 16 |           />
 17 |         </div>
 18 |         <div class="inputBox">
 19 |           <label for="userPassword">Password</label>
 20 |           <input
 21 |             type="password"
 22 |             name="userPassword"
 23 |             id="userPassword"
 24 |             placeholder="type your password"
 25 |             required
 26 |           />
 27 |         </div>
 28 |         <div>
 29 |           <button type="submit" name="" style="float: left">Submit</button>
 30 |           <router-link class="button" style="float: left" to="/register"
 31 |             >Register</router-link
 32 |           >
 33 |         </div>
 34 |       </form>
 35 |     </main>
 36 |     <footer></footer>
 37 |   </div>
 38 | </template>
 39 | 
 40 | <script>
 41 | import particlesConfig from "../assets/particles.json";
 42 | 
 43 | export default {
 44 |   name: "Login",
 45 |   data: function () {
 46 |     return {
 47 |       particlesConfig,
 48 |     };
 49 |   },
 50 | };
 51 | </script>
 52 | 
 53 | <style scoped>
 54 | * {
 55 |   box-sizing: border-box;
 56 | }
 57 | 
 58 | body {
 59 |   font-family: sans-serif;
 60 |   height: 100vh;
 61 |   margin: 0;
 62 |   padding: 0;
 63 | }
 64 | 
 65 | header {
 66 |   display: none;
 67 | }
 68 | 
 69 | .box {
 70 |   background-color: rgba(0, 0, 0, 0.8);
 71 |   border-radius: 10px;
 72 |   box-shadow: 0 15px 25px rgba(0, 0, 0, 0.8);
 73 |   margin: auto auto;
 74 |   padding: 40px;
 75 |   position: absolute;
 76 |   top: 50%;
 77 |   left: 50%;
 78 |   transform: translate(-50%, -50%);
 79 |   text-align: left;
 80 | }
 81 | 
 82 | .box h2 {
 83 |   margin: 0 0 30px 0;
 84 |   padding: 0;
 85 |   color: #fff;
 86 |   text-align: center;
 87 | }
 88 | 
 89 | .box .inputBox label {
 90 |   color: #fff;
 91 | }
 92 | 
 93 | .box .inputBox input {
 94 |   background: transparent;
 95 |   border: none;
 96 |   border-bottom: 1px solid #fff;
 97 |   color: #fff;
 98 |   font-size: 18px;
 99 |   letter-spacing: 2px;
100 |   margin-bottom: 30px;
101 |   outline: none;
102 |   padding: 10px 0;
103 |   width: 100%;
104 | }
105 | 
106 | .box input[type="submit"],
107 | .box button[type="submit"],
108 | a.button {
109 |   font-family: sans-serif;
110 |   background: #03a9f4;
111 |   font-size: 11px;
112 |   border: none;
113 |   border-radius: 5px;
114 |   color: #fff;
115 |   cursor: pointer;
116 |   font-weight: 600;
117 |   padding: 10px 20px;
118 |   letter-spacing: 2px;
119 |   outline: none;
120 |   text-transform: uppercase;
121 |   text-decoration: none;
122 |   margin: 2px 10px 2px 0;
123 |   display: inline-block;
124 | }
125 | 
126 | .box input[type="submit"]:hover,
127 | .box button[type="submit"]:hover,
128 | a.button:hover {
129 |   opacity: 0.8;
130 | }
131 | 
132 | #tsparticles {
133 |   position: fixed;
134 |   margin: 0;
135 |   padding: 0;
136 |   left: 0;
137 |   top: 0;
138 |   width: 100%;
139 |   height: 100%;
140 | }
141 | </style>


--------------------------------------------------------------------------------
/src/components/Register.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <Particles id="tsparticles" :options="particlesConfig" />
  4 | 
  5 |     <main class="box">
  6 |       <h2>Register</h2>
  7 |       <form>
  8 |         <div class="inputBox">
  9 |           <label for="userName">Username</label>
 10 |           <input
 11 |             type="text"
 12 |             name="userName"
 13 |             id="userName"
 14 |             placeholder="type your username"
 15 |             required
 16 |           />
 17 |         </div>
 18 |         <div class="inputBox">
 19 |           <label for="userPassword">Password</label>
 20 |           <input
 21 |             type="password"
 22 |             name="userPassword"
 23 |             id="userPassword"
 24 |             placeholder="type your password"
 25 |             required
 26 |           />
 27 |         </div>
 28 |         <div class="inputBox">
 29 |           <label for="userConfirmPassword">Confirm Password</label>
 30 |           <input
 31 |             type="password"
 32 |             name="userPassword"
 33 |             id="userConfirmPassword"
 34 |             placeholder="confirm your password"
 35 |             required
 36 |           />
 37 |         </div>
 38 |         <button type="submit" name="" style="float: left">Submit</button>
 39 |         <router-link class="button" style="float: left" to="/login"
 40 |           >Login</router-link
 41 |         >
 42 |       </form>
 43 |     </main>
 44 |     <footer></footer>
 45 |   </div>
 46 | </template>
 47 | 
 48 | <script>
 49 | import particlesConfig from "../assets/particles.json";
 50 | 
 51 | export default {
 52 |   name: "Register",
 53 |   data: function () {
 54 |     return {
 55 |       particlesConfig,
 56 |     };
 57 |   },
 58 | };
 59 | </script>
 60 | 
 61 | <style scoped>
 62 | * {
 63 |   box-sizing: border-box;
 64 | }
 65 | 
 66 | body {
 67 |   font-family: sans-serif;
 68 |   height: 100vh;
 69 |   margin: 0;
 70 |   padding: 0;
 71 | }
 72 | 
 73 | header {
 74 |   display: none;
 75 | }
 76 | 
 77 | .box {
 78 |   background-color: rgba(0, 0, 0, 0.8);
 79 |   border-radius: 10px;
 80 |   box-shadow: 0 15px 25px rgba(0, 0, 0, 0.8);
 81 |   margin: auto auto;
 82 |   padding: 40px;
 83 |   position: absolute;
 84 |   top: 50%;
 85 |   left: 50%;
 86 |   transform: translate(-50%, -50%);
 87 |   text-align: left;
 88 | }
 89 | 
 90 | .box h2 {
 91 |   margin: 0 0 30px 0;
 92 |   padding: 0;
 93 |   color: #fff;
 94 |   text-align: center;
 95 | }
 96 | 
 97 | .box .inputBox label {
 98 |   color: #fff;
 99 | }
100 | 
101 | .box .inputBox input {
102 |   background: transparent;
103 |   border: none;
104 |   border-bottom: 1px solid #fff;
105 |   color: #fff;
106 |   font-size: 18px;
107 |   letter-spacing: 2px;
108 |   margin-bottom: 30px;
109 |   outline: none;
110 |   padding: 10px 0;
111 |   width: 100%;
112 | }
113 | 
114 | .box input[type="submit"],
115 | .box button[type="submit"],
116 | a.button {
117 |   font-family: sans-serif;
118 |   background: #03a9f4;
119 |   font-size: 11px;
120 |   border: none;
121 |   border-radius: 5px;
122 |   color: #fff;
123 |   cursor: pointer;
124 |   font-weight: 600;
125 |   padding: 10px 20px;
126 |   letter-spacing: 2px;
127 |   outline: none;
128 |   text-transform: uppercase;
129 |   text-decoration: none;
130 |   margin: 2px 10px 2px 0;
131 |   display: inline-block;
132 | }
133 | 
134 | .box input[type="submit"]:hover,
135 | .box button[type="submit"]:hover,
136 | a.button:hover {
137 |   opacity: 0.8;
138 | }
139 | 
140 | #tsparticles {
141 |   position: fixed;
142 |   margin: 0;
143 |   padding: 0;
144 |   left: 0;
145 |   top: 0;
146 |   width: 100%;
147 |   height: 100%;
148 | }
149 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import { createRouter, createWebHashHistory } from 'vue-router';
 3 | import App from './App.vue'
 4 | import Home from './components/Home';
 5 | import Login from './components/Login';
 6 | import Register from './components/Register';
 7 | import Particles from 'particles.vue3';
 8 | 
 9 | const routes = [
10 |     { path: '/', component: Home },
11 |     { path: '/login', component: Login },
12 |     { path: '/register', component: Register }
13 | ]
14 | 
15 | const router = createRouter({
16 |     history: createWebHashHistory(),
17 |     routes,
18 | });
19 | 
20 | createApp(App).use(Particles).use(router).mount('#app');
21 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     publicPath: process.env.NODE_ENV === 'production'
3 |         ? '/vue3-auth-template/'
4 |         : '/'
5 | }
6 | 


--------------------------------------------------------------------------------