How to setup v1.1 - UedaTakeyuki/vue-faui-user-fe2 GitHub Wiki
Note: The module which you should import differs depending on whether you're using firebase from a CDN or npm or yarn.
If you're using firebase
CDN, the appropriate module is with CDN
suffix. I will refer to this difference in the following steps so please pay attention to it, thank you!
Initialize firebase and this package at the main.js
on your Vue project.
At your main.js file on your Vuetify project, import the initialize
component of this package. If you're using firebase
as installed with npm
or yarn
, import vue-faui-user-fe2/initialize
as follow:
import initialize from 'vue-faui-user-fe2/initialize'
If you're using firebase
from CDN, import CDN suffix version vue-faui-user-fe2/initialize
as follow:
import initialize from 'vue-faui-user-fe2/initializeCDN'
Call following 2 functions:
- fbinit(): This function initialize
firebase
instance - init(): This function prepare global variables indicate the login status
A typical example of your main.js might be as follows:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify';
import initialize from 'vue-faui-user-fe2/initializeCDN'
Vue.config.productionTip = false
initialize.fbinit()
Vue.mixin({
computed: initialize.init()
})
new Vue({
router,
vuetify,
render: h => h(App)
}).$mount('#app')
This function read your application's Firebase Config Object1 from a set of environment variables and initialize firebase instance with it.
The set of environment variables used by this function is as follows:
VUE_APP_apiKey=AIzaSyDyI8iMCe8R3rb3TACrab1XwQ_cG1UnObE
VUE_APP_authDomain=vue-faui-user-fe.firebaseapp.com
VUE_APP_databaseURL=
VUE_APP_projectId=vue-faui-user-fe
VUE_APP_storageBucket=vue-faui-user-fe.appspot.com
VUE_APP_messagingSenderId=1006020446206
VUE_APP_appId=1:1006020446206:web:fb17014018c82777a622af
In a local environment, you can set these by vue's .env.loca
file as follows:
VUE_APP_apiKey: apiKey
VUE_APP_authDomain: authDomain
VUE_APP_projectId: projectId
VUE_APP_storageBucket: storageBucket
VUE_APP_messagingSenderId: messagingSenderId
VUE_APP_appId: appId
In a hosting environment, for example Netlify, you can set these by Build environment variables as follows:
In case you've initialized firebase yourself, shouldn't call this or you get firebase duplication initialization error.
This function prepares global mixin indicating login status as follow:
-
$isLogin
: boolean, the initial value isfalse
, get betrue
when user logged in by firebase auth, get befalse
when user logged out. -
$isEmailVerified
: boolean, the initial value isfalse
, get betrue
when user logged in an account with the verified email address. -
$displayName
: string, the initial value is""
, get be the firebase auth display name when user logged in. -
$user_email
: string, the initial value is""
, get be the firebase auth user email address when user logged in. -
$user_id
: string, the initial value is""
, get be the firebase auth user id when user logged in.
You can refer above valuable in your application.
With <Login>
component, following Sign Up / Sign In pop-up and Email verification request pop-up is appears when not login.
And global variables about login status mentioned above will be updated according to the login status automatically.
At your App.vue file on your Vuetify project, import the Login
component of this package. If you're using firebase
as installed with npm
or yarn
, import vue-faui-user-fe2/account
as follow:
import {Login as Login} from 'vue-faui-user-fe2/login'
If you're using firebase
CDN, import CDN suffix version vue-faui-user-fe2/loginCDN
as follow:
import {LoginCDN as Login} from 'vue-faui-user-fe2/accountCDN'
At your App.vue file on your Vuetify project, add Login
as components as follow:
<script>
import {AccountRoutesCDN as AccountRoutes} from 'vue-faui-user-fe2/accountCDN' // If firebase is from CDN
// import {AccountRoutes as AccountRoutes} from 'vue-faui-user-fe2/account' // If firebase is from npm or yarn
import {LoginCDN as Login} from 'vue-faui-user-fe2/loginCDN' // If firebase is from CDN
// import {Login as Login} from 'vue-faui-user-fe2/login' // If firebase is from npm or yarn
export default {
components: { Login },
created(){
AccountRoutesCDN.init()
}
};
</script>
At your App.vue file on your Vuetify project, put <Login>
on the top of <v-main>
tag as folow:
<template>
<v-app>
<Navbar titleStr="Demo App" :links="links">
</Navbar>
<Login ref="login"/>
<v-main>
<router-view></router-view>
</v-main>
</v-app>
</template>
<template>
<v-app>
<Login/>
<v-content>
<router-view></router-view>
</v-content>
</v-app>
</template>
<script>
import {AccountRoutes, Login} from 'vue-faui-user-fe'
//import Login from '@/components/Login'
export default {
name: 'App',
components: {Login},
created(){
AccountRoutes.init()
}
};
</script>
In Case your Login component is copied as mentioned in section 2.2, your Login component should be imported from your copied path (ex: /src/components) as follow:
<template>
<v-app>
<Login/>
<v-content>
<router-view></router-view>
</v-content>
</v-app>
</template>
<script>
import {AccountRoutes/*, Login*/} from 'vue-faui-user-fe'
import Login from '@/components/Login'
export default {
name: 'App',
components: {Login},
created(){
AccountRoutes.init()
}
};
</script>
After AccountRoutes.init()
will be called, the following variables get available in the component.
- $isLogin: boolean, the initial value is
false
, get betrue
when user logged in by firebase auth, get befalse
when user logged out. - $isEmailVerified: boolean, the initial value is
false
, get betrue
when user logged in an account with the verified email address. - $displayName: string, the initial value is
""
, get be the firebase auth display name when user logged in. - $user_email: string, the initial value is
""
, get be the firebase auth user email address when user logged in. - $user_id: string, the initial value is
""
, get be the firebase auth user id when user logged in.
You can refer to these in your application through vue's refs special attribute, for example, in case you referred Login component as login as following,
<Login ref="login"/>
You can refer $isLogin
in your application <script> as follows:
this.$refs.login.$isLogin
Note, as mentioned in refs special attribute, $refs is also non-reactive, therefore you should not attempt to use it in templates for data-binding.
Refer to a real implementation on a sample project.
3. In case you're using vue-router, expand AccountRoutes.routes
into your routes
array on your router.js file.
With AccountRoutes.routes
, useful account management pages will be available on your SPA app with vue-router.
At your router.js file on your Vuetify project, import the AccountRoutes
component of this package. If you're using firebase
as installed with npm
or yarn
, import vue-faui-user-fe2/account
as follow:
import {AccountRoutes as AccountRoutes} from 'vue-faui-user-fe2/account'
If you're using firebase
CDN, import CDN suffix version vue-faui-user-fe2/accountCDN
as follow:
import {AccountRoutesCDN as AccountRoutes} from 'vue-faui-user-fe2/accountCDN'
Expand AccountRoutes.routes
on the routes:
array as follow:
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
// import AccountRoutes
import {AccountRoutesCDN as AccountRoutes} from 'vue-faui-user-fe2/accountCDN' // If firebase is from CDN
// import {AccountRoutes as AccountRoutes} from 'vue-faui-user-fe2/account' // If firebase is from npm or yarn
Vue.use(Router)
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
// Expand into routes array
...AccountRoutes.routes,
]
})
By this step, the following routes related to account management get available.
- path: '/account', name: 'account', The view for front menu of account
- path: '/changeemail',name: 'changeemail',
- path: '/changename',name: 'changename',
- path: '/newpassword',name: 'newpassword',
- path: '/signout',name: 'signout',
- path: '/deleteaccount',name: 'deleteaccount',
4. In case you are using vuetify-nav add Account menu into Navigation.
The account settings menu provided by vue-faui-user-fe2 can be merged into vuetify-nav by just adding AccountRoutes.menuItem
into links data on your App.vue
file as follow:
<template>
<v-app>
<Navbar titleStr="Demo App" :links="links">
</Navbar>
<Login/>
<v-content>
<router-view></router-view>
</v-content>
</v-app>
</template>
<script>
import {AccountRoutesCDN as AccountRoutes} from 'vue-faui-user-fe2/accountCDN' // If firebase is from CDN
// import {AccountRoutes as AccountRoutes} from 'vue-faui-user-fe2/account' // If firebase is from npm or yarn
import {LoginCDN as Login} from 'vue-faui-user-fe2/loginCDN' // If firebase is from CDN
// import {Login as Login} from 'vue-faui-user-fe2/login' // If firebase is from npm or yarn
import {Navbar} from 'vuetify-nav'
export default {
name: 'App',
components: { Navbar, Login },
data: () => ({
links: [
{ icon: 'home', text: 'Home', route: '/'},
AccountRoutes.menuItem,
]
}),
created(){
AccountRoutes.init()
}
};
</script>
Refer to a real implementation of the sample project.