{"id":1139,"date":"2019-02-13T23:00:00","date_gmt":"2019-02-13T23:00:00","guid":{"rendered":"https:\/\/old-2023.weichie.com\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\/"},"modified":"2024-02-05T15:44:47","modified_gmt":"2024-02-05T15:44:47","slug":"setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase","status":"publish","type":"post","link":"https:\/\/old-2023.weichie.com\/nl\/blog\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\/","title":{"rendered":"Setting up a Vue Projects with Vue CLI, Vuex, Vue router and Firebase"},"content":{"rendered":"
\n

Let’s get started with Vue Firebase! I recently started a new job as freelance developer in a digital company and got to know more about VueJS<\/a>. I took a break from React for now and will experiment more cool things with Vue from now on! This post is written with Vue 2.6.6 (CLI 3.3)<\/p>\n<\/div>\n\n

\n\n<\/div>\n\n
\n

Why Vue?<\/h2>\n<\/div>\n\n
\n

Why Vue and not keep on going in React? As I mentioned I started freelancing for a new company, and they are hands-on with Vue. And as long as I can do just javascript, I’ll love whatever framework you give me! I struggled a little bit with getting firebase to work on my own, so that’s why I’m writing this article for.<\/p>\n<\/div>\n\n

\n

Our project will handle all basic Vue project setups:<\/p>\n<\/div>\n\n

\n

–   Kick-starting a project with VueCLI
–   Installing vue-router
–   Installing Vuex, for simpler Vue state management
–   Linking up Vue FireBase
–   Firebase Auth
–   FireStore user documents<\/p>\n<\/div>\n\n

\n

I am new to the Firebase firestore myself as well, so I don’t know if my store-structure is any good, but at least it gets you linked up with firebase and you can continue the adventure on your own! As the firestore is out of beta from this week, maybe it has a promising future.. also: it’s free for small\/personal use! What are we waiting for?<\/p>\n<\/div>\n\n

\n

Kick starting with VueCLI<\/h2>\n<\/div>\n\n
\n

I’m assuming you’re pc is up-to-date for running Vue. With Node\/npm\/vue\/… all installed. Head on over to cli.vuejs.org<\/a> and install everything you need if not.<\/p>\n<\/div>\n\n

\n

Once installed, launch your terminal and create our first project! I’ll be creating a client management tool for myself, but you can name it whatever you want. My project will simply be called ‘client’<\/p>\n<\/div>\n\n

\n
vue create client<\/code><\/pre>\n<\/div>\n\n
\n
After this you’ll get some options. I’m just going for the default options here, and will install all the rest manually to explain.<\/p>\n<\/div>\n\n
\n
\"\"<\/figure>\n<\/div>\n\n
\n
Installing Vue Router + App cleanup<\/h2>\n<\/div>\n\n
\n
Once the project is created, navigate to your project and we’ll start off with installing the Vue Router first.<\/p>\n<\/div>\n\n
\n
cd client\nnpm i vue-router --save<\/code><\/pre>\n<\/div>\n\n
\n
After this open up your lovely text-editor to start coding in the project. In App.vue<\/strong> remove the styles, the HelloWorld component and the default Vue Image. So our App.vue will look like this:<\/p>\n<\/div>\n\n
\n
<template>\n  <div id=\"app\"><\/div>\n<\/template>\n\n<script>\n  export default {\n    name: 'app',\n  }\n<\/script>\n\n<style>\n<\/style><\/code><\/pre>\n<\/div>\n\n
\n
You may remove the HelloWorld component completely from your project, as we’re not going to use it anyway obviously. You may create a new project called ‘Home.vue’ and put in these default values:<\/p>\n<\/div>\n\n
\n
<template>\n   <div class=\"wrapper\">\n      <h1>Home Component<\/h1>\n   <\/div>\n<\/template>\n\n<script>\n   export default {\n      name: 'Home'\n   }\n<\/script><\/code><\/pre>\n<\/div>\n\n
\n
We don’t need to style script in any of our components. We’ll add some css with sass\/scss later on. Next, before we can test our router, add a Login.vue and a Register.vue component to our project as well. So we can start playing with the routes. Give them the same code as our Home component, but change the h1 tag and the ‘name’ in our scripts.<\/p>\n<\/div>\n\n
\n
After you’ve created the 3 components (Home.vue, Login.vue, Register.vue) inside the components folder, create a new .js file outside the components folder, but still in our \/src folder. Name this file routes.js. We’re creating this file to keep our routes in a seperate file, so we can easily manage it later.<\/p>\n<\/div>\n\n
\n
\/\/ \/src\/routes.js\nimport Home from '.\/components\/Home'\nimport Login from '.\/components\/Login'\nimport Register from '.\/components\/Register'\nexport const routes = [\n   {\n      path: '\/',\n      name: 'Home',\n      component: Home\n   },{\n      path: '\/login',\n      name: 'login',\n      component: Login\n   },{\n      path: '\/register',\n      name: 'register',\n      component: Register\n   }\n];<\/code><\/pre>\n<\/div>\n\n
\n
We need to include our Components at the top of the file first, so we can pass it as ‘component’ property in our routes. Further we’re defining what paths (url’s) will use what component. We will update and secure our routes later, but this is good enough for now. So let’s open our main.js<\/strong> file and add vue-router to our app!<\/p>\n<\/div>\n\n
\n
import Vue from 'vue'\nimport App from '.\/App.vue'\nimport VueRouter from 'vue-router'\nimport { routes } from '.\/routes'\nVue.use(VueRouter);\nVue.config.productionTip = false\nconst router = new VueRouter({\n  mode: 'history',\n  routes\n});\nnew Vue({\n  router,\n  render: h => h(App),\n}).$mount('#app')<\/code><\/pre>\n<\/div>\n\n
\n
In main.js we import VueRouter from ‘vue-router’ and our routes from routes.js. After that we tell Vue to use vue-router with Vue.use(VueRouter) as a plugin. And of course our new router needs some options. I prefer mode: ‘history’ for clean URL’s. So my login page will look like <a href=”#!”>example.com\/login<\/a> instead of <a href=”#”>example.com\/#\/login<\/a>.<\/p>\n<\/div>\n\n
\n
Let’s go back to our terminal and run our project!<\/p>\n<\/div>\n\n
\n
yarn serve<\/code><\/pre>\n<\/div>\n\n
\n
What do we see? Completely nothing… what a bummer, we’re not there yet. Jeeez this setup… Ok, back in our App.vue<\/strong> we need to add a router-view component, so the router knows where to display our components of course.<\/p>\n<\/div>\n\n
\n
\/\/ App.vue\n<template>\n  <div id=\"app\">\n    <router-view><\/router-view>\n  <\/div>\n<\/template>\n\n<script>\n...\n<\/script><\/code><\/pre>\n<\/div>\n\n
\n
And now we’ll see something! Jeeeej. If we now change our url to \/login or \/register, we’ll see our different components are displayed. I hope you’re getting the same results.<\/p>\n<\/div>\n\n
\n
\"\"<\/figure>\n<\/div>\n\n
\n
Adding navigation<\/h3>\n<\/div>\n\n
\n
It’s always fun to have some navigation in our app, so we can browse through our app with more ease. Next up: Create a Header.vue<\/strong> component in our \/src folder, with links to the home, login and register component. The Header component will look like this:<\/p>\n<\/div>\n\n
\n
<template>\n   <header>\n      <div class=\"logo\">\n         <router-link to=\"\/\" class=\"Logo\">Client<\/router-link>\n      <\/div>\n      <div class=\"main-navigation\">\n         <router-link to=\"\/login\">Login<\/router-link>\n         <router-link to=\"\/register\">Register<\/router-link>\n      <\/div>\n   <\/header>\n<\/template>\n\n<script>\n   export default {\n      name:\" Header-component\"\n   }\n<\/script><\/code><\/pre>\n<\/div>\n\n
\n
Did I mention I really like the html and script part in Vue way over how React\/jsx does it! No longer using className instead of just html-class.. But that aside, still loving react as well, you may have noticed I’m using <router-link> instead of just an a-tag. This is so our router knows it needs to take over the navigation, and not just let the server handle the request. Now we can add our Header into our app so we can use it:<\/p>\n<\/div>\n\n
\n
\/\/ \/src\/app.vue\n<template>\n  <div id=\"app\">\n    <Header \/>\n    <router-view><\/router-view>\n  <\/div>\n<\/template>\n\n<script>\n  import Header from '.\/components\/Header'\n  export default {\n    name: 'app',\n    components: {\n      Header\n    }  \n  }\n<\/script><\/code><\/pre>\n<\/div>\n\n
\n
This is how we add components to other components. We Import the component in the top of our ‘script’ part, and tell this component we want to use this as a component inside our HTML part. After this we can simply use <Header \/> as HTML-tag and poof, our header will show up.<\/p>\n<\/div>\n\n
\n
\"\"<\/figure>\n<\/div>\n\n
\n
Look how sexy it is! Styles I’ll leave completely up to you \ud83d\ude42<\/p>\n<\/div>\n\n
\n
State Management with Vuex<\/h2>\n<\/div>\n\n
\n
Nowadays you just can’t have a web-app without a state. If you’re new to State management in web-apps, all mayor js frameworks are using one. And from now on it will be your only source of truth in your app. This is very important to keep every component in your app up-to-date with each other. This will save you a lot of time in the future when you’re trying to let components communicate with each other.<\/p>\n<\/div>\n\n
\n
Your app state will be managed with a Store. In my example I’m using Vuex as store management. The state will be accessible by every component in your app and your components will react to changes in the state, to keep it real-time. In our terminal, install Vuex<\/a>:<\/p>\n<\/div>\n\n
\n
npm i vuex --save<\/code><\/pre>\n<\/div>\n\n
\n
(yes, I’m mixing npm install and yarn serve.. I just copy the npm i tags from npmjs.org when I’m adding new packages to my projects) But no worries, it all works \ud83d\ude42 After installing Vuex, create a store<\/strong> folder in our \/src folder. I love to keep my routes and my stores seperate from the rest of my application.<\/p>\n<\/div>\n\n
\n
Inside \/src, create a \/store folder. Inside create a store.js file and a modules folder. Inside this module folder we’ll create an authStore.js file. This file will keep the authentication state from our users. Here is how it would look like:<\/p>\n<\/div>\n\n
\n
\/src\n  \/assets\n  \/components\n  \/store\n    \/modules\n      authStore.js\n    store.js\n  App.vue\n  ...<\/pre>\n<\/div>\n\n
\n
The Vuex store can work with different Modules, to keep all of your stores seperate. So now I’m creating an authStore, that will keep all my authentication data. Later on I can create a clientStore to keep all my client information, or a persisted store to keep a store of all the data I want to store in the users localStorage. You can create a new store for everything you want to keep seperate, so you can easely find and edit functionalities later on.<\/p>\n<\/div>\n\n
\n
First, open authStore.js<\/strong> and we will write our first Module. A module can exist with following Objects: state, getters, actions and mutations:<\/p>\n<\/div>\n\n
\n
\/\/ \/src\/store\/modules\/authStore.js\nconst state = {\n   test: 'My first state!'\n};\nconst getters = {\n};\nconst actions = {\n};\nconst mutations = {\n};\nexport default {\n   state,\n   getters,\n   actions,\n   mutations\n}<\/code><\/pre>\n<\/div>\n\n
\n
State: <\/strong>Will keep the state of our app. Every module will have their own state, getters, actions and mutations. But in this way, we can access our authState more specific, like this: this.$state.authState.name (to get logged in name) and this.$state.clientState.name (to get our clients name) for example.<\/p>\n<\/div>\n\n
\n
Getters:<\/strong> Getters can be used to get data from our state, to our component. But as I wrote above in my State explanation, we can also access state data directly. But Getters can be used to create complex functionality across different states in your app! For example, I can access the authState from my clientState and visa versa!<\/p>\n<\/div>\n\n
\n
Actions: <\/strong>Actions are actually kind-of the same as mutations, but it is best practice to use actions only to commit a mutation. Actions can also be used in asynchronous tasks, while Mutations can not. But it is best to dispatch an action from your components. And then commit an action to a mutation. With dispatch, all other components who are using that state will receive the new state value.<\/p>\n<\/div>\n\n
\n
Mutations: <\/strong>Only used for updating the state of your application. A mutation can accept a payload to pass to your applications state.<\/p>\n<\/div>\n\n
\n
And in the end, we’ll export those 4 objects, in 1 object. And now we’re ready to write our store.js <\/strong>file. Create one if you don’t have one already and add the following:<\/p>\n<\/div>\n\n
\n
\/\/ src\/store\/store.js\nimport Vue from 'vue'\nimport Vuex from 'vuex'\nVue.use(Vuex);\nimport authStore from '.\/modules\/authStore'\nexport default new Vuex.Store({\n   modules: {\n      authStore\n   }\n});<\/code><\/pre>\n<\/div>\n\n
\n
This separate store.js file will import Vue and Vuex again. We’re adding Vuex as a Vue-plugin as well with Vue.use and then export our Vuex Store so we can import it in our main.js<\/b>, so open main.js and add our brand new store!<\/p>\n<\/div>\n\n
\n
\/\/ \/src\/main.js\nimport Vue from 'vue'\nimport App from '.\/App.vue'\nimport VueRouter from 'vue-router'\nimport { routes } from '.\/routes'\nimport store from '.\/store\/store'   \/\/ <-- add this line ---------\nVue.use(VueRouter);\nVue.config.productionTip = false\nconst router = new VueRouter({\n  mode: 'history',\n  routes\n});\nnew Vue({\n  router,\n  store,  \/\/ <-- add this line ---------\n  render: h => h(App),\n}).$mount('#app')<\/code><\/pre>\n<\/div>\n\n
\n
This is how your main.js file should look like. Open up your app in the browser and check your vue dev tools to see if our state is present or not. If you see your state with our test value, you’re amazing! We have a working vue app with routing and a store to save our data!<\/p>\n<\/div>\n\n
\n
\"\"<\/figure>\n<\/div>\n\n
\n
If you want to retrieve this item from the store to test if it is actually working, you can write this line in one of your view-components (home, login or register):<\/p>\n<\/div>\n\n
\n
<h1>{{ this.$store.state.authStore.test }}<\/h1><\/code><\/pre>\n<\/div>\n\n
\n
Don’t forget to write {{ … }} in your html, to let Vue know you’re injecting javascript instead of plain html.<\/p>\n<\/div>\n\n
\n
Time for Firebase!<\/h2>\n<\/div>\n\n
\n
I know the store is all fun and games, but it can’t actually save data. It saves data temporarely in the state, so your whole app can use it, but if you mutate something and refresh the page, the changes will be gone. You can persist your store locally to keep changes even after refresh, but let’s go even further and store our data online. So you can access the data from somewhere else than your own machine. (or that other users can access it)<\/p>\n<\/div>\n\n
\n
Create a Firebase account<\/h3>\n<\/div>\n\n
\n
Before we can use Vue Firebase, we need an account obviously. If you don’t have one already, create one and start your first project! Firebase is completely free to use from small projects like personal ones like this. After creating your project, copy your web-credentials to make the connection from our app to our database.<\/p>\n<\/div>\n\n
\n
\"\"<\/figure>\n<\/div>\n\n
\n
Now we need to install the firebase package in our app. You can use all sorts of firebase packages, but I prefer the official, basic one. (no vue-firebase, firestore, …) just simple firebase:<\/p>\n<\/div>\n\n
\n
npm i firebase --save<\/code><\/pre>\n<\/div>\n\n
\n
Then head over to our app folder and create a new firestore.js<\/strong> file inside our \/src folder. We include firebase at the top and past our credentials in this file, like this:<\/p>\n<\/div>\n\n
\n
\/\/ \/src\/firestore.js\nimport firebase from 'firebase'\nimport 'firebase\/firestore'\nconst config = {\n   apiKey: \"xxxxxxxxxxxxxx\",\n   authDomain: \"xxxxxxxxxxxxxx\",\n   databaseURL: \"xxxxxxxxxxxxxx\",\n   projectId: \"xxxxxxxxxxxxxxt\",\n   storageBucket: \"xxxxxxxxxxxxxx\",\n   messagingSenderId: \"xxxxxxxxxxxxxx\"\n};\nconst firestore = firebase.initializeApp(config);\nconst db = firebase.firestore();\nexport default db;<\/code><\/pre>\n<\/div>\n\n
\n
And to finish off our setup, we’ll include this in our main.js<\/strong> file as well:<\/p>\n<\/div>\n\n
\n
\/\/ \/src\/main.js\n...\nimport firebase from 'firebase'\n...<\/code><\/pre>\n<\/div>\n\n
\n
We don’t need firebase in our main.js file yet, but I include it now before I forget, as we need it later when we’re authenticating our app through vue firebase.<\/p>\n<\/div>\n\n
\n
Registrating users with Vue Firebase<\/h2>\n<\/div>\n\n
\n
Time for the real work! I have the feeling that user creation through firebase, and an actual user-document in the firestore are seperate. So we need to create both a new user in the app auth AND in our firestore collection. First, enable email authentication in firebase:<\/p>\n<\/div>\n\n
\n
\"\"<\/figure>\n<\/div>\n\n
\n
\"\"<\/figure>\n<\/div>\n\n
\n
So we’re allowed to create users in firebase with email. In our Register.vue<\/strong> file, add following HTML to get started.<\/p>\n<\/div>\n\n
\n
\/\/ \/src\/components\/Register.vue\n<template>\n   <div class=\"wrapper\">\n      <h1>Register component<\/h1>\n      <form>\n         <input type=\"text\" placeholder=\"Firstname\" \/><br>\n         <input type=\"text\" placeholder=\"Lastname\" \/><br>\n         <input type=\"text\" placeholder=\"Username\" \/><br>\n         <input type=\"email\" placeholder=\"Email\" \/><br>\n         <input type=\"password\" placeholder=\"Choose a password\" \/><br>\n         <button>Create account<\/button>\n      <\/form>\n   <\/div>\n<\/template><\/code><\/pre>\n<\/div>\n\n
\n
After we got our basic template, we can start writing our javascript to bind our input fields, and a setup for our registration function:<\/p>\n<\/div>\n\n
\n
\/\/ \/src\/components\/Register.vue\n<script>\n   export default {\n      name: 'Register',\n      data(){\n         return{\n            userData: {\n               firstname: '',\n               lastname: '',\n               username: '',\n               email: '',\n               password: ''\n            },\n            successMessage: '',\n            errorMessage: ''\n         }\n      },\n      methods:{\n         registerUser(){\n            console.log('Register code is ready to go...');\n         }\n      }\n   }\n<\/script><\/code><\/pre>\n<\/div>\n\n
\n
Before we can test if our basic setup is working, we’ll need to bind our scripts with our html. Update our html-template like this:<\/p>\n<\/div>\n\n
\n
\/\/ \/src\/components\/Register.vue\n<template>\n   <div class=\"wrapper\">\n      <h1>Register component<\/h1>\n      <form @submit.prevent=\"registerUser\">\n         <input type=\"text\" placeholder=\"Firstname\" v-model=\"userData.firstname\" \/><br>\n         <input type=\"text\" placeholder=\"Lastname\" v-model=\"userData.lastname\" \/><br>\n         <input type=\"text\" placeholder=\"Username\" v-model=\"userData.username\" \/><br>\n         <input type=\"email\" placeholder=\"Email\" v-model=\"userData.email\" \/><br>\n         <input type=\"password\" placeholder=\"Choose a password\" v-model=\"userData.password\" \/><br>\n         <button>Create account<\/button>\n      <\/form>\n   <\/div>\n<\/template><\/code><\/pre>\n<\/div>\n\n
\n
If all goes well, we can see in our vue devtools that our input fields are bound to our components state. (heads up: this is NOT our app state, just the local Register.vue component state).<\/p>\n<\/div>\n\n
\n
\"\"<\/figure>\n<\/div>\n\n
\n
Again… I’ll leave the stylings up to you \ud83d\ude09 Ok if all of this works fine, we’re ready to write our Registration function! Back between our script tags, update the registerUser function:<\/p>\n<\/div>\n\n
\n
\/\/ \/src\/components\/Register.vue\nimport firebase from 'firebase'\nimport db from '..\/firestore'\n...\nregisterUser(){\n            firebase.auth().createUserWithEmailAndPassword(this.userData.email, this.userData.password)\n               .then(user => {\n                  console.log(user);\n               })\n               .catch(err => {\n                  this.errorMessage = err.message\n               });\n         }<\/code><\/pre>\n<\/div>\n\n
\n
FOR REAL… NO JOKE!!! This is all that’s needed to make this work. createUserWithEmailAndPassword(email, password) is all. it. takes. Unbelievable! Head over to your firebase users and check it out.<\/p>\n<\/div>\n\n
\n
\"\"<\/figure>\n<\/div>\n\n
\n
This is awesome.. but also not really. We now have a user in our authentication, so this user can login. But we don’t store any of the other information we asked at registration… The createUserWithEmailAndPassword function will only store email and password. The firebase User object can only store email, password, username, phone and avatar. For firstname, lastname, … we need our own User collection in our firestore, to be able to link users with their own profile and to use them later to link to friends, comments or likes for example. So after our createUser function, we’ll add a username to our official firebase user object, and create a new user in our userCollection to store all the other information. Go go go:<\/p>\n<\/div>\n\n
\n
registerUser(){\n            firebase.auth().createUserWithEmailAndPassword(this.userData.email, this.userData.password)\n               .then(() => {\n                  firebase.auth().currentUser.updateProfile({\n                     displayName: this.userData.username\n                  }).then(() => {\n                     db.collection('users').add({\n                        firstname: this.userData.firstname,\n                        lastname: this.userData.lastname,\n                        username: this.userData.username,\n                        email: this.userData.email,\n                     }).then(() => {\n                        this.$router.replace('home');\n                     }).catch(err => {\n                        this.errorMessage = err.message;\n                     });\n                  }).catch(err => {\n                     this.errorMessage = err.message;\n                  });\n               }).catch(err => {\n                  this.errorMessage = err.message\n               });<\/code><\/pre>\n<\/div>\n\n
\n
It’s a lot of chaining, as we first need to create the user, then get the current logged in user and update the profile with the username (displayname). After that, we can create our usercollection and add the new user. I hope you get the same result as me when you visit your firestore: (make sure it’s active AND in test-mode)<\/p>\n<\/div>\n\n
\n
\"\"<\/figure>\n<\/div>\n\n
\n
Try to add a few more users, to make sure all is working great. Next up: logging in!<\/p>\n<\/div>\n\n
\n
Authenticating users with Vue and Firebase<\/h2>\n<\/div>\n\n
\n
Same as for our registration, we’ll start with a basic login template:<\/p>\n<\/div>\n\n
\n
\/\/ \/src\/components\/Login.vue\n<template>\n   <div class=\"wrapper\">\n         <h1>Login Component&lt;\/h1>\n         <form>\n            <input type=\"email\" placeholder=\"Email\" \/><br>\n            <input type=\"password\" placeholder=\"Password\" \/><br>\n            <button>Login&lt;\/button>\n         <\/form>\n   <\/div>\n<\/template><\/code><\/pre>\n<\/div>\n\n
\n
And our script:<\/p>\n<\/div>\n\n
\n
<script>\n   export default {\n      name: 'Login',\n      data(){\n         return{\n            email: '',\n            password: '',\n            successMessage: '',\n            errorMessage: ''\n         }\n      },\n      methods: {\n         login(){\n            console.log('Logging in...');\n         }\n      }\n   }\n<\/script><\/code><\/pre>\n<\/div>\n\n
\n
And before we write our Login logic, do some bindings in our template again:<\/p>\n<\/div>\n\n
\n
<template>\n   <div class=\"wrapper\">\n         <h1>Login Component<\/h1>\n         <form @submit.prevent=\"login\">\n            <input type=\"email\" placeholder=\"Email\" v-model=\"email\" \/><br>\n            <input type=\"password\" placeholder=\"Password\" v-model=\"password\" \/><br>\n            <button>Login<\/button>\n         <\/form>\n   <\/div>\n<\/template><\/code><\/pre>\n<\/div>\n\n
\n
This is something I learned from React: NEVER have input fields in your app, that are not bound to a state! (uncontrolled input) Ok after the bindings, add our login script:<\/p>\n<\/div>\n\n
\n
import firebase from 'firebase';\nimport db from \"..\/firestore\";\n...\nlogin(){\n            firebase.auth().signInWithEmailAndPassword(this.email, this.password)\n               .then(user => {\n                  console.log(user);\n               })\n               .catch(err => {\n                  this.errorMessage = err.message\n               });\n         }<\/code><\/pre>\n<\/div>\n\n
\n
If you login and get a userObject in your console, you know you’re good!<\/p>\n<\/div>\n\n
\n
\"\"<\/figure>\n<\/div>\n\n
\n
Jeeej! Big Congratzzzz to you! \ud83d\ude42<\/p>\n<\/div>\n\n
\n
Now you have your user state stored in your firebase ‘state’ (you can’t see with the vue devtools) but I advice you store your userState in your own Vuestore as well. In our case, our authStore.js. But this is up to you. I’ll continue with showing you how to add a route-guard so our dashboard is only accessible when we’re logged in and to make sure our login state is saved even after we refresh the page. Because this is not the case right now.<\/p>\n<\/div>\n\n
\n
Good job for making it this far in my tutorial! Let me know if I went over some parts too fast or if all worked out very well for you! I was struggling with Vue Firebase tutorials in the beginning as well, so I hope I explained it much better!<\/p>\n<\/div>\n\n
\n
Navigation Guard<\/h2>\n<\/div>\n\n
\n
Now, let’s add a route guard in our app, so that some pages can only be accessed when a user is logged in. Like a dashboard for example. If a user navigates to the dashboard, we will redirect them back to the login page if they’re not logged in already. First, create a new dashboard component in your components folder. This will just have the basic template stucture. After you’ve created the dashboard component, open up your routes.js<\/strong> file and add a catch-all route that will redirect to the login page. Then add a route to the \/dashboard and add a meta key object inside, that says ‘requiresAuth: true’:<\/p>\n<\/div>\n\n
\n
\/\/ \/src\/routes.js\n...\nimport Dashboard from '.\/components\/Dashboard'\nexport const routes = [\n   {\n      path: '*',\n      redirect: '\/login'\n   },{\n      path: '\/',\n      name: 'Home',\n      component: Home\n   },{\n      path: '\/dashboard',\n      name: 'Dashboard',\n      component: Dashboard,\n      meta: {\n         requiresAuth: true\n      }\n   },{\n      ...\n   },{\n      ...\n   }\n];<\/code><\/pre>\n<\/div>\n\n
\n
Now that some of our routes have the meta tag requiresAuth, we need to loop over all our routes in main.js<\/strong> to check if we need to be logged in to access the page or not. Add this in our main.js file:<\/p>\n<\/div>\n\n
\n
const router = new VueRouter({\n  ...\n});\nrouter.beforeEach((to, from, next) => {\n  const currentUser = firebase.auth().currentUser;\n  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);\n  if (requiresAuth && !currentUser) next('login');\n  else if (!requiresAuth && currentUser) next('dashboard');\n  else next();\n});\nnew Vue({\n  ...<\/code><\/pre>\n<\/div>\n\n
\n
Now you see we can’t access to \/dashboard page without logging in first.<\/p>\n<\/div>\n\n
\n
Keeping the Auth State alive<\/h2>\n<\/div>\n\n
\n
What is the point of logging in, when the app forgets we’re logged in after we refresh the page? For our firebase authentication to stay alive, we can use the build-in firebase function ‘onAuthStateChanged’. Add following code around our app = new Vue({…}) code, like this:<\/p>\n<\/div>\n\n
\n
\/\/ \/src\/main.js\n...\nlet app = '';\nfirebase.auth().onAuthStateChanged(user => {\n  if(!app){\n    app = new Vue({\n      router,\n      store,\n      render: h => h(App),\n    }).$mount('#app')\n  }\n});<\/code><\/pre>\n<\/div>\n\n
\n
Now you can see that after logging in, we can access the \/dashboard page! woohoow.<\/p>\n<\/div>\n\n
\n
Logging out of our application with Vue Firebase<\/h2>\n<\/div>\n\n
\n
One small thing I forgot to add, is the ability to logout of our application… Add a logout link to your header with an @click function to a logout method:<\/p>\n<\/div>\n\n
\n
<a @click.prevent.stop=\"logout\">Logout<\/a><\/code><\/pre>\n<\/div>\n\n
\n
And in the script-tag of our header component:<\/p>\n<\/div>\n\n
\n
<script>\n   import firebase from 'firebase'\n   export default {\n      name: \"Header-component\",\n      methods: {\n         logout(){\n            firebase.auth().signOut().then(() => {\n               this.$router.replace('login');\n            });\n         }\n      }\n   }\n<\/script><\/code><\/pre>\n<\/div>\n\n
\n
That’s it! A complete Vue project setup with the VueCLI, routing, store management and a firebase firestore! Congratzzz<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"
Let’s get started with Vue Firebase! I recently started a new job as freelance developer in a digital company and got to know more about VueJS. I took a break from React for now and will experiment more cool things with Vue from now on! This post is written with Vue 2.6.6 (CLI 3.3)<\/p>\n","protected":false},"author":1,"featured_media":708,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[211],"tags":[268,265,269,270,234,271,272,273],"class_list":["post-1139","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-nl","tag-authentication-nl","tag-firebase-nl","tag-firestore-nl","tag-real-time-nl","tag-vue-nl","tag-vue-router-nl","tag-vuex-nl","tag-webapp-nl"],"acf":[],"yoast_head":"\nVue Firebase tutorial with VueCLI, vuex, vue-router and firebase - Weichie<\/title>\n<meta name=\"description\" content=\"Get started with a full Vue setup including Routing, State management and a Firebase\/Firestore connection! Authenticate users and create user collections!\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Setting up a Vue Projects with Vue CLI, Vuex, Vue router and Firebase - Weichie.com\" \/>\n<meta property=\"og:description\" content=\"Get started with a full Vue setup including Routing, State management and a Firebase\/Firestore connection! Authenticate users and create user collections!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/old-2023.weichie.com\/nl\/blog\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\/\" \/>\n<meta property=\"og:site_name\" content=\"Weichie.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/weichiecom\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-13T23:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-05T15:44:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/old-2023.weichie.com\/wp-content\/uploads\/2023\/02\/api_2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"weichie\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Vue Firebase tutorial with VueCLI, vuex, vue-router and firebase - Weichie\" \/>\n<meta name=\"twitter:description\" content=\"Get started with a full Vue setup including Routing, State management and a Firebase\/Firestore connection! Authenticate users and create user collections!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.weichieprojects.com\/wp-content\/uploads\/2018\/12\/api_2.jpg\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"weichie\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/blog\\\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/blog\\\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\\\/\"},\"author\":{\"name\":\"weichie\",\"@id\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/#\\\/schema\\\/person\\\/36b4fff07382bc08a5c566728d9c579f\"},\"headline\":\"Setting up a Vue Projects with Vue CLI, Vuex, Vue router and Firebase\",\"datePublished\":\"2019-02-13T23:00:00+00:00\",\"dateModified\":\"2024-02-05T15:44:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/blog\\\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\\\/\"},\"wordCount\":2979,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/blog\\\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/old-2023.weichie.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/api_2.jpg\",\"keywords\":[\"authentication\",\"firebase\",\"Firestore\",\"real-time\",\"vue\",\"vue-router\",\"vuex\",\"webapp\"],\"articleSection\":[\"Development\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/blog\\\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/blog\\\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\\\/\",\"url\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/blog\\\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\\\/\",\"name\":\"Vue Firebase tutorial with VueCLI, vuex, vue-router and firebase - Weichie\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/blog\\\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/blog\\\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/old-2023.weichie.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/api_2.jpg\",\"datePublished\":\"2019-02-13T23:00:00+00:00\",\"dateModified\":\"2024-02-05T15:44:47+00:00\",\"description\":\"Get started with a full Vue setup including Routing, State management and a Firebase\\\/Firestore connection! Authenticate users and create user collections!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/blog\\\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\\\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/blog\\\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/blog\\\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\\\/#primaryimage\",\"url\":\"https:\\\/\\\/old-2023.weichie.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/api_2.jpg\",\"contentUrl\":\"https:\\\/\\\/old-2023.weichie.com\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/api_2.jpg\",\"width\":1080,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/blog\\\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Setting up a Vue Projects with Vue CLI, Vuex, Vue router and Firebase\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/#website\",\"url\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/\",\"name\":\"Weichie.com\",\"description\":\"Digital Agency in Brussels & New York\",\"publisher\":{\"@id\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/#organization\"},\"alternateName\":\"Weichie\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/#organization\",\"name\":\"Weichie.com\",\"alternateName\":\"Weichie\",\"url\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/old-2023.weichie.com\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/Weichie_full.png\",\"contentUrl\":\"https:\\\/\\\/old-2023.weichie.com\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/Weichie_full.png\",\"width\":1181,\"height\":177,\"caption\":\"Weichie.com\"},\"image\":{\"@id\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/weichiecom\\\/\",\"https:\\\/\\\/www.instagram.com\\\/weichiecom\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/weichie\\\/\"],\"description\":\"A digital agency based in Brussels and New York. We create high-quality digital experiences for brands and help them promote their business through the online world! Specialised in websites, e-commerce, SEO and applications.\",\"email\":\"hello@weichie.com\",\"telephone\":\"+32 469 129 449\",\"legalName\":\"Weichie.com\",\"vatID\":\"0782.257.983\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"1\",\"maxValue\":\"10\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/old-2023.weichie.com\\\/nl\\\/#\\\/schema\\\/person\\\/36b4fff07382bc08a5c566728d9c579f\",\"name\":\"weichie\",\"sameAs\":[\"https:\\\/\\\/old-2023.weichie.com\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Vue Firebase tutorial with VueCLI, vuex, vue-router and firebase - Weichie","description":"Get started with a full Vue setup including Routing, State management and a Firebase\/Firestore connection! Authenticate users and create user collections!","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"nl_NL","og_type":"article","og_title":"Setting up a Vue Projects with Vue CLI, Vuex, Vue router and Firebase - Weichie.com","og_description":"Get started with a full Vue setup including Routing, State management and a Firebase\/Firestore connection! Authenticate users and create user collections!","og_url":"https:\/\/old-2023.weichie.com\/nl\/blog\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\/","og_site_name":"Weichie.com","article_publisher":"https:\/\/www.facebook.com\/weichiecom\/","article_published_time":"2019-02-13T23:00:00+00:00","article_modified_time":"2024-02-05T15:44:47+00:00","og_image":[{"width":1080,"height":1080,"url":"https:\/\/old-2023.weichie.com\/wp-content\/uploads\/2023\/02\/api_2.jpg","type":"image\/jpeg"}],"author":"weichie","twitter_card":"summary_large_image","twitter_title":"Vue Firebase tutorial with VueCLI, vuex, vue-router and firebase - Weichie","twitter_description":"Get started with a full Vue setup including Routing, State management and a Firebase\/Firestore connection! Authenticate users and create user collections!","twitter_image":"https:\/\/www.weichieprojects.com\/wp-content\/uploads\/2018\/12\/api_2.jpg","twitter_misc":{"Geschreven door":"weichie","Geschatte leestijd":"20 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/old-2023.weichie.com\/nl\/blog\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\/#article","isPartOf":{"@id":"https:\/\/old-2023.weichie.com\/nl\/blog\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\/"},"author":{"name":"weichie","@id":"https:\/\/old-2023.weichie.com\/nl\/#\/schema\/person\/36b4fff07382bc08a5c566728d9c579f"},"headline":"Setting up a Vue Projects with Vue CLI, Vuex, Vue router and Firebase","datePublished":"2019-02-13T23:00:00+00:00","dateModified":"2024-02-05T15:44:47+00:00","mainEntityOfPage":{"@id":"https:\/\/old-2023.weichie.com\/nl\/blog\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\/"},"wordCount":2979,"commentCount":0,"publisher":{"@id":"https:\/\/old-2023.weichie.com\/nl\/#organization"},"image":{"@id":"https:\/\/old-2023.weichie.com\/nl\/blog\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\/#primaryimage"},"thumbnailUrl":"https:\/\/old-2023.weichie.com\/wp-content\/uploads\/2023\/02\/api_2.jpg","keywords":["authentication","firebase","Firestore","real-time","vue","vue-router","vuex","webapp"],"articleSection":["Development"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/old-2023.weichie.com\/nl\/blog\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/old-2023.weichie.com\/nl\/blog\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\/","url":"https:\/\/old-2023.weichie.com\/nl\/blog\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\/","name":"Vue Firebase tutorial with VueCLI, vuex, vue-router and firebase - Weichie","isPartOf":{"@id":"https:\/\/old-2023.weichie.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/old-2023.weichie.com\/nl\/blog\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\/#primaryimage"},"image":{"@id":"https:\/\/old-2023.weichie.com\/nl\/blog\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\/#primaryimage"},"thumbnailUrl":"https:\/\/old-2023.weichie.com\/wp-content\/uploads\/2023\/02\/api_2.jpg","datePublished":"2019-02-13T23:00:00+00:00","dateModified":"2024-02-05T15:44:47+00:00","description":"Get started with a full Vue setup including Routing, State management and a Firebase\/Firestore connection! Authenticate users and create user collections!","breadcrumb":{"@id":"https:\/\/old-2023.weichie.com\/nl\/blog\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/old-2023.weichie.com\/nl\/blog\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/old-2023.weichie.com\/nl\/blog\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\/#primaryimage","url":"https:\/\/old-2023.weichie.com\/wp-content\/uploads\/2023\/02\/api_2.jpg","contentUrl":"https:\/\/old-2023.weichie.com\/wp-content\/uploads\/2023\/02\/api_2.jpg","width":1080,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/old-2023.weichie.com\/nl\/blog\/setting-up-vue-projects-with-vue-cli-vuex-routing-and-firebase\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/old-2023.weichie.com\/nl\/"},{"@type":"ListItem","position":2,"name":"Setting up a Vue Projects with Vue CLI, Vuex, Vue router and Firebase"}]},{"@type":"WebSite","@id":"https:\/\/old-2023.weichie.com\/nl\/#website","url":"https:\/\/old-2023.weichie.com\/nl\/","name":"Weichie.com","description":"Digital Agency in Brussels & New York","publisher":{"@id":"https:\/\/old-2023.weichie.com\/nl\/#organization"},"alternateName":"Weichie","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/old-2023.weichie.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/old-2023.weichie.com\/nl\/#organization","name":"Weichie.com","alternateName":"Weichie","url":"https:\/\/old-2023.weichie.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/old-2023.weichie.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/old-2023.weichie.com\/wp-content\/uploads\/2023\/11\/Weichie_full.png","contentUrl":"https:\/\/old-2023.weichie.com\/wp-content\/uploads\/2023\/11\/Weichie_full.png","width":1181,"height":177,"caption":"Weichie.com"},"image":{"@id":"https:\/\/old-2023.weichie.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/weichiecom\/","https:\/\/www.instagram.com\/weichiecom\/","https:\/\/www.linkedin.com\/company\/weichie\/"],"description":"A digital agency based in Brussels and New York. We create high-quality digital experiences for brands and help them promote their business through the online world! Specialised in websites, e-commerce, SEO and applications.","email":"hello@weichie.com","telephone":"+32 469 129 449","legalName":"Weichie.com","vatID":"0782.257.983","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"1","maxValue":"10"}},{"@type":"Person","@id":"https:\/\/old-2023.weichie.com\/nl\/#\/schema\/person\/36b4fff07382bc08a5c566728d9c579f","name":"weichie","sameAs":["https:\/\/old-2023.weichie.com"]}]}},"_links":{"self":[{"href":"https:\/\/old-2023.weichie.com\/nl\/wp-json\/wp\/v2\/posts\/1139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/old-2023.weichie.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/old-2023.weichie.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/old-2023.weichie.com\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/old-2023.weichie.com\/nl\/wp-json\/wp\/v2\/comments?post=1139"}],"version-history":[{"count":0,"href":"https:\/\/old-2023.weichie.com\/nl\/wp-json\/wp\/v2\/posts\/1139\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/old-2023.weichie.com\/nl\/wp-json\/wp\/v2\/media\/708"}],"wp:attachment":[{"href":"https:\/\/old-2023.weichie.com\/nl\/wp-json\/wp\/v2\/media?parent=1139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/old-2023.weichie.com\/nl\/wp-json\/wp\/v2\/categories?post=1139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/old-2023.weichie.com\/nl\/wp-json\/wp\/v2\/tags?post=1139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}