Build a Snackbar with Vue
Playing
01. Build a Snackbar with Vue

Episodes

0%
Your progress
  • Total: 18m
  • Played: 0m
  • Remaining: 18m
Join or sign in to track your progress

Transcript

00:00
In this snippet we're going to build out a snack bar with Vue and specifically we're going to use
00:05
Vuex for this. Now there are loads of packages that allow you to do this. You could even pull in or build your own package but we're going to use Vuex just because we want to keep things really really simple. If you have a Vue project already set up with Vuex this is a really good start and of course you can switch this out a little bit later. So the demo for this is going
00:24
to be really really quick. Let's go ahead and click trigger snack and sure enough you can see that pops down. So we're going to cover that animation or transition that you see there within Vue as well and we're starting this up with Tailwind but you can pretty much use any CSS framework or of course roll the styles yourself if you want to. So with that demo done
00:45
let's go and take a look at how we build this out. Okay so we're going to start completely fresh here. Create out a fresh Vue project and I'm just going to call this Vue snack. So let's run through the options together if you do want to follow along. We're going to manually select features here and we're going to use Vuex here. You can of course bring in router if you want to see
01:04
what happens when you transition to a different page and we'll bring in our CSS pre-processes as well but that's pretty much it. We're going to use Vue 3 here not that we're looking at any specific Vue 3 features and we're going to bring in sass here. For ES linting we'll just say with error preventing only and we won't lint this just so it doesn't get in the way of the video and of
01:25
course just wait for our project to build. Okay now that's done let's go and into the Vue snack directory and we'll run npm run serve to get this straight up and running. So let's just wait for that to finish and we should see our fresh Vue app just here. Great! Let's just start to tidy this up a little bit and we'll pull Tailwind in if that's something that you want to use. So I'm pretty much
01:48
going to get rid of all of the default here. We'll get rid of the hello world component that ships with this and we'll also get rid of everything in here as well. Let's crank out our trigger snack button on our home page. Of course this functionality is going to work from pretty much anywhere and let's get rid of that hello world component as well and in assets let's get rid of the logo just
02:09
to keep things nice and clean. So we should end up with just a really simple page here. So let's get Tailwind pulled in and of course you can use pretty much anything. With this we're going to have to pull in the PostCSS compatibility build for the project that's been built for Vue 3. So let's go ahead and do an uninstall on these even though we don't have Tailwind installed at
02:30
the moment because we've got PostCSS pulled in. So let's go back into that Vue snack directory and just run that and then we're going to go ahead and pull in the compatibility packages just here. Just while that is finishing let's go and create in our assets directory a styles folder. Let's bring in app.css and let's grab the Tailwind base components and utilities import. All of that's on
02:58
the documentation if you're just getting started with Tailwind but that's pretty much what we're going to do. And then over in app.vue I go ahead and tend to pull this in with a style tag and let's just pull this up and find the source out. And we could actually self-close that we don't necessarily need that there. And the source for this is in our assets folder in styles and app.css.
03:22
So what we should end up with this after we've created our PostCSS config file is a nice styled app. So let's go into our root directory and let's create our a PostCSS.config.js file. And inside of here we just want to pull in Tailwind and our auto-prefixer and export them as plugins. So the first one is our auto-prefixer and for that we can just require in auto-prefixer
03:52
and we'll do the same with Tailwind as well. And then let's go ahead and say module exports and we're going to pull in them as plugins. So we just reference them in this array so we've got Tailwind.css, auto-prefixer and we should be good. Now sometimes this does require that we just restart this so let's go ahead and run npm run serve.
04:16
Okay so that's just to do with how we've pulled this in so let's reference the current directory instead and we should be good. Okay great so let's hop back over to the browser and we should see a nicely styled Tailwind project. Great so now that we've got that done of course you may have skipped that if you didn't want to use Tailwind we can actually start to look at our snack
04:36
functionality. So inside of app.main that's where we're going to be triggering this from and like I said we're going to be using Vuex. So the best thing to do here would be to pull in a module for this just to keep things nice and tidy. So let's create out a snack.js file and we'll keep things really simple for now and then we'll look at merging in config.
04:56
So with this we're going to set this to namespaced because we're going to be pulling it in as a module as part of our Vuex store and for our snack state we're just going to have snack which will be this snack text by default set to null and we'll only trigger this to render and show this if this is anything other than null. Okay so let's just create out an action really quickly and we will
05:19
fill the rest in in a minute. So we're just going to call this snack but you can call it pretty much anything. Bring in the ability to commit a mutation and also then bring in the ability to call this method or this action or dispatch this action with some text. So with this we want to use a mutation in here so let's create out our mutations to set that snack. So with this we'll
05:41
get our stating and we'll get the text that we want to set it to and we'll just set our snack to the text. So now in here when we call this we can go ahead and commit set snack and set that to our text. So that's pretty much all we need to do. The last thing that we'll need is a getter so let's define our getters out in here and that's just going to be the snack getter which will
06:04
return to us from our state. So if you're new to Vuex I'll go over this in just a minute so let's return state.snack. Okay so what we've done we have an action now that we can dispatch that commits a mutation to set whatever we've defined in text into our state and then we have a getter in here that just retrieves our state for us. This is just Vuex 101 kind of stuff so if you understand
06:29
this then we're good to go. Okay so let's go over to app.vue and let's bring in the ability to map our actions because that's pretty much what we're going to need in here from Vuex and let's get rid of our components and just to find some methods out in here. So it's mapping these actions the action is the snack action which is just snack.snack. Now at the moment we don't have this
06:53
snack module available so inside of our main Vuex file we're just going to import snack from snack and then under modules we'll just add that in there so we should have that now available in there to call. So let's just go over bring up our console just to make sure we didn't do anything wrong that looks good to me and now we can trigger this. So let's set the href to a hash
07:15
and then we're going to say click prevent and we're going to say well we could create out another method for this so let's just say do something because that will be kind of any action whether you are registering a user logging them in performing some kind of action this is what is going to trigger it. So let's just say this snack and this is a snack and then let's
07:36
trigger that do something action just inside of there. So let's just try this out if you've got Vue dev tools open you can have a look inside of there but let's click on that and it looks like that's all good. So now what we want to do is access the snack value to check that that is actually in there and working. So we're going to do this in a separate component so let's create
07:56
our snack.vue component start to create this out that's where we're going to actually show the snack value and let's add in our script here and this time we're going to import our getters from Vuex so we can actually get the snack value from this that we've set in app.vue via that. So for this we're going to need a computed property let's spread in our getters and just make sure we put
08:22
them in properly and that's going to be snack and again this will be from snack and snack so now we can output the value of snack just to make sure that is being set correctly let's click on that and we don't actually see anything so let's just try oh of course we didn't actually pull the component in that would really really help so let's import snack from our components directory
08:48
and snack and let's add our components in here like so and then just at the top of here let's output our snack component great so let's come over and sure enough you can already see that that is working but of course this isn't good enough because when we want when we trigger a snack we want this to eventually go so we want
09:10
this to have some kind of interval or timeout javascript timeout to reset this value back to how it was before which is a null so what we do is when we commit setting the snack to text we then use a timeout in here to set this after a period let's say just two seconds to go ahead and commit this again but set the snack back to a null value so we run our commit
09:38
to set the text we wait two seconds and we set it back to null so what this should now do is trigger this but then commit after a couple of seconds to get rid of that and of course this is all reactive so everything is being updated in our snack component to work really nicely now let's style this out with some nice transitions and then we will look at potentially some options that we can
10:00
pass into here just to make this a little bit more flexible because you might have different delays for different scenarios so in terms of the actual snack itself let's just style this out really quickly in here and for this what i'm going to do is have a full bar going across the entire top of the page so let's create a fixed full width bar and we'll set the top to zero and the left to zero
10:25
and just to demo to how that looks let's just add we'll add the snack yeah let's add the snack value in there in fact let's add let's just add snack in there just so we can see this so that's what that looks like so of course get rid of the blue background color and for this we're going to set a flex and justify center there are loads of different ways that you could style this up
10:46
this is just how i would prefer doing it so inside of here it will be the actual small snack bar this no longer has a background color so with this we can now set the background something like blue maybe set the text to white and let's give it this some padding on the x-axis of eight and say padding y of two and let's set this to rounded and large and we'll set the text to small
11:10
so now what we should have in here is the following great so that just kind of sits in that invisible top bar using flex to center this but like i said there are loads of different ways that you can do this so let's actually output the snack value and then let's add a if statement to this to say well we only want to show this if there is actually a snack so now when we trigger this
11:30
sure enough that pops up and then goes again so we've got that sorted okay so with this now we want to add a transition around this so it hops down from the top of course you can do this in whatever way you want to do i'm going to go ahead and use native transitions within view to achieve this so we wrap this conditional render in this transition item and then we give this a name so we
11:56
name our transition and i'm just going to call this snack so over in app.css now we can start to figure out how we're actually going to animate this loads of this over on the view documentation but essentially what we want to do in here is have a snack which is the name of the transition that we've created enter active class and also a snack leave active class and what that allows
12:20
us to do is add a transition in there with a duration and an easing in there as well now we could do this with pure css or if you're using tailwind you can use apply so we could apply transition on this and duration 500 for example and ease in out but like i said if you're using pure css that's going to look a little bit different okay so let's see what that's done
12:42
and let's click trigger snack and at the moment it does nothing because there is nothing on our snack just here that would make that animate there are no properties that are changing but what we can now do is say something like snack enter from and we could specifically set this to translate it a negative on the y-axis to go upwards so this starts from this point and in this case we can
13:08
say transform and minus translate y24 for example let's just see what that does if we just click trigger snack and you can see that pops down but then it should just disappear without any other animation that's where some of the other properties in here that we need to add in so we're going to say snack leave two let's add that in i'm going to do pretty much the same thing here to say
13:36
that when we leave this we want it to go back up again on the y-axis so let's click on trigger snack and that pops down and sure enough goes back up again so at the moment this is kind of sitting at the top here so of course to get rid of that what we can do is just add a margin on the top here just to pull that down a little bit and now when we trigger that that's down in view and then
13:57
of course pops back up again so there we go that's just really one way that you can create a really simple snack bar if you're already using vuex i wouldn't recommend pulling in vuex specifically for this state management doesn't quite feel right but that's how you can do it now if you want to stick around to learn how you can apply some more advanced options to this let's do that
14:17
now so at the moment we're pretty limited because we're just passing in some text into here we don't really have the scope to add any more options and with actions when you dispatch actions you can't add additional items or parameters into this or arguments so what we need to do is really replace the text out with an object so we can actually pass these in so let's call these options for
14:43
example and let's just comment this out for now just so we can kind of focus on this and we want some default options so maybe we could store these just at the top here so let's go ahead and create some defaults out here it's just going to be again an object so we'll say time 2000 i can't think of a better way to describe how the delay is on this we could have a delay as well so delay is how long
15:07
it takes for it to actually appear and then we could have the text in here as an option now what we want to do is not replace these defaults when we pass the options in we want to merge them in instead so i'm going to go ahead and set defaults once we do this to spreading out the defaults but then also spreading out the options so that will basically merge them two together and then we'll
15:28
end up with something that we can use so let's just console log on options and see what we get now of course the api for this has now changed we're now going to have to replace this out with an object and specifically put in the text there that we want to see so let's just check this out so keeping open the console we can see we've got well just text at the moment so let's have a look
15:50
at why that is oh yeah of course we want the default so we're going to reference the defaults here when we do that you could do it the other way around you could set the options in here to merging in the defaults but we'll just stick with the defaults for now okay let's click on that and sure enough you can see that the text has been replaced but the time and the delay is still there
16:08
and of course what we could do is also merge in something else so let's set the delay here to 5 000 and we should see that merged in as well when we click on that great okay so now we want to kind of pull this together and why don't we go ahead and implement the delay here which is the delay it takes until this is actually shown okay so let's just bring back what we have already
16:30
and instead of this we're going to reference defaults.txt and in fact i think i'm actually going to change this around to options because i think it makes a little bit more sense to do that merge in the defaults rather than update the defaults so let's merge them in and of course this is now options.time let's check it out so let's trigger that and we should see that for
16:53
a couple of seconds and that goes back up again great okay so let's implement the delay just to finish things off now what we could do with this is delay the entire execution of the commit or the commit of the commit so let's go and set a timeout in here and just wrap all of this into here and of course this isn't perfect but it will do the job so let's say options.delay for
17:19
that so we're delaying the overall check of this now we want the timeout inside of this timeout because once we run this after a certain time we then want that committed and then we want the other timeout to kick in to make this work so let's go over to app and let's set a delay on this of a second and let's see what we get there we go so that delays by a second waits for two and then
17:44
disappears so although it's not perfect like i said before this is a really good start if you just want to keep things really lean and you don't want to bring an entire package in to handle this for you with just a really simple store here we've set this up of course barring these couple of additional options just to show a really simple snack bar at the top of our page

Episode summary

In this episode, we're diving into building a simple snackbar (the little notification bar that slides in and out) using Vue 3 and Vuex—no external snackbar packages required! We'll walk through the entire process, from scaffolding a fresh Vue project with Vuex, to wiring up the store for snackbar actions, mutations, and state.

First, you'll see a quick demo of the snackbar in action. Then, we'll strip out the default Vue boilerplate and pull in Tailwind CSS for some speedy styling (but feel free to use any CSS framework you like, or your own custom styles). We'll also handle a bit of setup magic with PostCSS so everything plays nicely together.

After the initial setup, we jump into Vuex and create a snack module. This keeps our snackbar logic organized, giving us a way to trigger a message from anywhere in the app. We make a basic snackbar component that renders when a message is in state and set up a self-clearing mechanism so it pops up and then disappears after a couple seconds.

But we don't stop there! We spice things up by adding a smooth slide-down transition using Vue's transition component and some custom (or Tailwind) styles. You'll learn how to customize the duration and delay for different snackbar messages by passing options, and how to handle merging default and custom settings.

By the end, you’ll have a flexible, reactive snackbar system that you can easily adapt or expand—perfect for any Vue app where you want a lightweight way to show quick notifications.

Episode discussion

No comments, yet. Be the first!