Display a splash animation in Nuxt only at the start of each session

As a newcomer to Nuxt, my goal is to showcase a fullscreen animated gif for approximately 2 seconds to users when they first visit my site.

I've considered using cookies to determine who should see the animation screen, but I'm unsure where to begin. My research has mostly focused on PWAs, iOS, and Android, while I am primarily interested in displaying the animation screen on desktop devices.

Although I am confident in presenting the fullscreen animation, my main query is:

How can I easily identify if this is the user's initial session of the day? And if it is, how do I display the animation to them?

javascriptvue.jsnuxt.jsnetlifyprismic.io

Answer №1

Storing the last time a user visited your site can be easily done using localStorage. This client-side storage method is great for retaining data without server access, unlike cookies.

To implement this feature, you can integrate the logic in layouts/default.vue, like so:

// layouts/default.vue

mounted() {
  const lsKey = "lastVisitDate";
  const lastVisitDate = localStorage.getItem(lsKey)

  if (/* check if lastVisitDate was yesterday or earlier */) {
    localStorage.setItem(lsKey, new Date());
    // Add animation to display
  }
}

If you need a temporary session that's active as long as the browser remains open, consider using sessionStorage instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating a property on an object during iteration

Currently, I am in the process of developing a Single Page Application using Laravel on the backend and Vue.js. I have two arrays that are crucial to my project: The first array is accessArray: ["BIU","CEO","Finance","HRD","Group"] The second array is a ...

javascriptjqueryvue.js

Attempting to create a versatile function that can be used multiple times and then showcase the output in a designated

I have been working on a function that is proving to be quite challenging. My goal is simple - I want to extract the values of days, hours, minutes, and seconds and display them in the .overTime div. The twist is, I need to reuse this function multiple tim ...

javascriptjqueryhtml

What is the best way to transfer data from an Ajax function to a controller action?

I have a button in my view that triggers a jQuery Ajax function, with parameters fetched from my model <input type="button" value="Run Check" onclick="runCheck('@actionItem.StepID', '@Model.Client.DatabaseConnectionString', '@M ...

javascriptjqueryajaxasp.net-core

Perform calculations using the provided input values or null values in Javascript/Jquery

I'm a beginner in Javascript and JQuery. Take a look at my code that calculates an average (A) value based on three input values. https://i.sstatic.net/teGkc.png Check out the JQuery snippet below: $(".q-value, .e-value, .t-value").click(f ...

javascripthtmljquery

Grouping Elements in JavaScript with a Personalized Sorting Algorithm

As I work with Objects in Javascript, my goal is to sort them by clustering based on their distances from each other. In Java, I have successfully achieved this using a custom distance function and hierarchical clustering. Unfortunately, I haven't be ...

javascriptarrays

Is it possible to modify the default port from 8080 to a different value within Vue?

Currently, I've been using Vue.js and Node.js to develop my app. By default, Vue runs on port 8080 while Node runs on port 3008. However, due to specific circumstances, I need to change the port for Vue from 8080 to something else like 8086 or 3005. ...

vue.jsvuejs2port

Is it necessary to store tokens in cookies, local storage, or sessions?

I am currently utilizing React SPA, Express, Express-session, Passport, and JWT. I find myself puzzled by the various client-side storage options available for storing tokens: Cookies, Session, and JWT/Passport. Is it necessary to store tokens in cookies, ...

javascriptreactjscookiesjwtlocal-storage

Variables with a global scope within a module

Is there a way to declare a global variable that can be accessed inside a specific module? For example, if we have a module called "test" with files index.js, test1.js, and test2.js, can we define a variable inside index.js that is accessible in test1.js a ...

javascriptnode.jsexpress

Tips for integrating Typescript into a pre-existing Vue 3 project

The contents of my package.json file are as follows: { "name": "view", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve" ...

typescriptvue.jsvuejs3vue-cli

Weather Application featuring Circular Slider

I've been on the hunt for a circular slider animation. Imagine it working like this: <input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" /> <span id="range">0</span> function showValue(newValue ...

javascriptjqueryhtmlcssslider

The unbeatable combination of Vuex and Typescript

I am currently in the process of converting a JavaScript project to TypeScript. However, I have encountered a type error when attempting to integrate Vuex with Vue. import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); https://i.sstatic.net/e7 ...

typescriptvue.jsvuejs2vuex

Guide on removing the <hr/> tag only from the final list item (li) in an Angular

This is my Angular view <li class= "riskmanagementlink" ng-repeat="link in links"> <h3> {{link.Description}} </h3> <a> {{link.Title}} </a> <hr/> </li> I need assistance with removing the hr tag for the l ...

javascriptjqueryhtmlangularjs

Maintain the initial value using ko.mapping.fromJS

How can I prevent new data fetched from an AJAX call using ko.mapping.fromJS from replacing the existing data in my observableArray? I want to append the new data without losing the previous entries. function ViewModel() { var self = this; self. ...

javascriptajaxknockout.js

What is the best way to update a variable in a Vuetify component

I am attempting to modify the background color of <v-progress> by utilizing the variable $progress-circular-underlay-stroke, however, the changes I make do not seem to show in the output. <template> <v-progress-circular :rotate="36 ...

vue.jsvuetify.js

Tips for properly aligning a decal using THREE.DecalGeometry

Currently, I'm in the process of learning how to apply decals onto a mesh using the THREE.DecalGeometry. I've been attempting to attach decals to the vertex on each face - face.a. I experimented with utilizing the face normal and an arbitrary Ve ...

javascriptthree.js

Passing dynamic scope from Angular to a directive is a seamless process

I am working with a directive that retrieves an attribute value from an http call in the following manner: Controller app.controller("HomeController", function($scope){ $http.get("/api/source").then(function(res){ $scope.info = res.data }); }); ...

javascripthtmlangularjs

What are some ways to streamline and improve the readability of my if/else if statement?

I've created a Rock Paper Scissors game that runs in the console. It currently uses multiple if/else if statements to compare user input against the computer's selection and determine a winner. The code is quite lengthy and repetitive, so I' ...

javascriptfunctionconditional-statements

Tips for dynamically passing input data in an Angular Library

I need to receive user input and then send it to an API endpoint located in the services section, however the services section must be transformed into a library. How can I accomplish this data transfer without constantly updating the library or insertin ...

javascriptangulartypescript

JavaScript - Imported function yields varied outcome from module

I have a utility function in my codebase that helps parse URL query parameters, and it is located within my `utils` package. Here is the code snippet for the function: export function urlQueryParamParser(params: URLSearchParams) { const output:any = {}; ...

javascripttypescriptimportmodulenode-modules

Implementing a PHP button update functionality sans utilizing an HTML form

I need a way to update my database with just a click of a button, without using any forms or POST requests. Most examples I've seen involve updating through forms and the $_POST method. Is there a simpler way to update the database by directly click ...

javascriptphpjqueryajax