Cookies management

Vue Bootstrap 5 Cookies management plugin

This component is used to save in the browser data that we want to have access at the next user visit. For example how many times or when last time user visit our page.

Cookies management built with the latest Bootstrap 5 and Vue 3. Options included: show modals only to new users, set a cookie, and much more.

Note: Read the API tab to find all available options and advanced customization

Basic example

The Cookies Management Component provides methods to add, remove and get cookies

Advanced example

Show Modal for new users

Using the showModalNewUser method you can display the modal for new users. Click start button to start simulate this behavior. After next click modal don't show any more until you click reset. 

        
            
              <template>
                <MDBBtn color="primary" @click="setNewUserCookie">
                  Show modal
                </MDBBtn>
                <MDBBtn color="primary" @click="resetNewUserCookie"> Reset </MDBBtn>
                <MDBModal
                  id="newUserModal"
                  tabindex="-1"
                  labelledby="newUserModalLabel"
                  v-model="newUserModal"
                >
                  <MDBModalHeader>
                    <MDBModalTitle id="newUserModalLabel">
                      This is modal for new user
                    </MDBModalTitle>
                  </MDBModalHeader>
                  <MDBModalBody>
                    This model will not appear again until you press the reset
                    button and refresh the page
                  </MDBModalBody>
                  <MDBModalFooter>
                    <MDBBtn color="secondary" @click="newUserModal = false"
                      >Close</MDBBtn
                    >
                  </MDBModalFooter>
                </MDBModal>
              </template>
            
        
    
        
            
              <script>
                import { inject, ref } from "vue";
                import { MDBBtn, MDBModal, MDBModalHeader, MDBModalTitle, MDBModalBody, MDBModalFooter } from 'mdb-vue-ui-kit';

                export default {
                  components: {
                    MDBBtn,
                    MDBModal,
                    MDBModalHeader,
                    MDBModalTitle,
                    MDBModalBody,
                    MDBModalFooter
                  },
                  setup() {
                    const Cookie = inject("MDBCookies");
                    const newUserModal = ref(false);
                    const setNewUserCookie = () => {
                      Cookie.showModalNewUser(newUserModal);
                    };
                    const resetNewUserCookie = () => {
                      Cookie.remove("is-first-visit");
                    };

                    return {
                      newUserModal,
                      setNewUserCookie,
                      resetNewUserCookie,
                    };
                  },
                };
              </script>
            
        
    
        
            
              <script setup lang="ts">
                import { inject, ref } from "vue";
                import { MDBBtn, MDBModal, MDBModalHeader, MDBModalTitle, MDBModalBody, MDBModalFooter } from 'mdb-vue-ui-kit';

                const Cookie = inject("MDBCookies");
                const newUserModal = ref(false);
                const setNewUserCookie = () => {
                  Cookie.showModalNewUser(newUserModal);
                };
                const resetNewUserCookie = () => {
                  Cookie.remove("is-first-visit");
                };
              </script>

Show modal after next visit

If you want to display the modal to the person who will visit the page again, you can use the showModalScoring method. Enter as a parameter the information after how many visits to the website the modal should appear. Click start button 3 times to test this feature. 

        
            
              <template>
                <MDBBtn color="primary" @click="setNextVisitCookie">
                  Show modal
                </MDBBtn>
                <MDBBtn color="primary" @click="resetNextVisitCookie">
                  Reset
                </MDBBtn>
                <MDBModal
                  id="nextVisitModal"
                  tabindex="-1"
                  labelledby="nextVisitModalLabel"
                  v-model="nextVisitModal"
                >
                  <MDBModalHeader>
                    <MDBModalTitle id="nextVisitModalLabel">
                      This model shows up after the third visit to the page.
                    </MDBModalTitle>
                  </MDBModalHeader>
                  <MDBModalBody>
                    This model will not appear again until you press the reset
                    button and refresh the page
                  </MDBModalBody>
                  <MDBModalFooter>
                    <MDBBtn color="secondary" @click="nextVisitModal = false">
                      Close
                    </MDBBtn>
                  </MDBModalFooter>
                </MDBModal>
              </template>
            
        
    
        
            
              <script>
                import { inject, ref } from "vue";
                import { MDBBtn, MDBModal, MDBModalHeader, MDBModalTitle, MDBModalBody, MDBModalFooter } from 'mdb-vue-ui-kit';

                export default {
                  components: {
                    MDBBtn,
                    MDBModal,
                    MDBModalHeader,
                    MDBModalTitle,
                    MDBModalBody,
                    MDBModalFooter
                  },
                  setup() {
                    const Cookie = inject("MDBCookies");
                    const nextVisitModal = ref(false);
                    const setNextVisitCookie = () => {
                      Cookie.showModalScoring(nextVisitModal, 3);
                    };
                    const resetNextVisitCookie = () => {
                      Cookie.remove("visit-counter");
                    };

                    return {
                      nextVisitModal,
                      setNextVisitCookie,
                      resetNextVisitCookie,
                    };
                  },
                };
              </script>
            
        
    
        
            
              <script setup lang="ts">
                import { inject, ref } from "vue";
                import { MDBBtn, MDBModal, MDBModalHeader, MDBModalTitle, MDBModalBody, MDBModalFooter } from 'mdb-vue-ui-kit';

                const Cookie = inject("MDBCookies");
                const nextVisitModal = ref(false);
                const setNextVisitCookie = () => {
                  Cookie.showModalScoring(nextVisitModal, 3);
                };
                const resetNextVisitCookie = () => {
                  Cookie.remove("visit-counter");
                };
              </script>

Cookies management - API

Import

        
            
          import { createApp } from "vue";
          import App from "./App.vue";
          import Cookie from 'mdb-vue-cookies';
          
          const app = createApp(App);
          
          app.use(Cookie).mount("#app");

Methods

Name Description Example
set Set Cookie Cookie.set( ... );
get Get Cookie Cookie.get( ... );
set Remove Cookie Cookie.remove( ... );
showModalNewUser Shows modal for new user Cookie.showModalNewUser( ... );
showModalScoring Shows modal on specific visit Cookie.showModalScoring( ... ); 
        
            
          <script>
            import { inject, ref } from "vue";
            export default {
              setup() {
                const Cookie = inject("MDBCookies");
                Cookie.set('cookie-name', value, { expires: 1 });
              },
            };
          </script>