#Tutorial Timis | Explore Tumblr posts and blogs

tasksweekly · 5 years ago

Photo

[TASK 188: MARSHALL ISLANDS]

There’s a masterlist below compiled of over 60+ Marshallese faceclaims categorised by gender with their occupation and ethnicity denoted if there was a reliable source. If you want an extra challenge use random.org to pick a random number! Of course everything listed below are just suggestions and you can pick whichever faceclaim or whichever project you desire.

Any questions can be sent here and all tutorials have been linked below the cut for ease of access! REMEMBER to tag your resources with #TASKSWEEKLY and we will reblog them onto the main! This task can be tagged with whatever you want but if you want us to see it please be sure that our tag is the first five tags, @ mention us or send us a messaging linking us to your post!

THE TASK - scroll down for FC’s!

STEP 1: Decide on a FC you wish to create resources for! You can always do more than one but who are you starting with? There are links to masterlists you can use in order to find them and if you want help, just send us a message and we can pick one for you at random!

STEP 2: Pick what you want to create! You can obviously do more than one thing, but what do you want to start off with? Screencaps, RP icons, GIF packs, masterlists, PNG’s, fancasts, alternative FC’s - LITERALLY anything you desire!

STEP 3: Look back on tasks that we have created previously for tutorials on the thing you are creating unless you have whatever it is you are doing mastered - then of course feel free to just get on and do it. :)

STEP 4: Upload and tag with #TASKSWEEKLY! If you didn’t use your own screencaps/images make sure to credit where you got them from as we will not reblog packs which do not credit caps or original gifs from the original maker.

THINGS YOU CAN MAKE FOR THIS TASK - examples are linked!

Stumped for ideas? Maybe make a masterlist or graphic of your favourite faceclaims. A masterlist of names. Plot ideas or screencaps from a music video preformed by an artist. Masterlist of quotes and lyrics that can be used for starters, thread titles or tags. Guides on culture and customs.

Screencaps

RP icons [of all sizes]

Gif Pack [maybe gif icons if you wish]

PNG packs

Manips

Dash Icons

Character Aesthetics

PSD’s

XCF’s

Graphic Templates - can be chara header, promo, border or background PSD’s!

FC Masterlists - underused, with resources, without resources!

FC Help - could be related, family templates, alternatives.

Written Guides.

and whatever else you can think of / make!

MASTERLIST!

Kathy Jetnil-Kijiner (1988) Marshallese - spoken word artist and poet.

Billma Peter (1996) Marshallese - model and Miss Marshall Islands 2019.

Netha Gideon (?) Marshallese - actress.

Lulani Ritok (?) Marshallese - actress and composer.

Tolfina Fakatou (?) Marshallese - actress.

Abacca Anjain-Maddison (?) Marshallese - actress.

Nica Wase (?) Marshallese - actress and composer.

Martha Horiuchi (?) Marshallese - actress.

Billma Melson (?) Marshallese - actress.

Vivian Niedenthal (?) Marshallese - actress.

Karen Earnshaw (?) Marshallese - actress and director.

Magdalene Johnson (?) Marshallese - actress.

F - Athletes:

Haley Nemra (1989) Marshallese - middle-distance runner.

Julianne Kirchner (1991) Marshallese - swimmer.

Sidra Triplett (1994) Marshallese - volleyball player.

Neikormo Lanki-Nimoto (1995) Marshallese - basketball player.

Ann-Marie Hepler (1996) Marshallese - swimmer.

Mattie Sasser (1996) Marshallese - weightlifter.

Colleen Furgeson (1998) Marshallese - swimmer.

Mariana Cress (1998) Marshallese - sprinter.

Tamara Andrike (2001) Marshallese - basketball player.

Naupaka Ackley (2001) Marshallese - basketball player.

Joy Ratidara (2002) Marshallese - basketball player.

Darcyann Muller (?) Marshallese - volleyball player.

Aliyah Brown (?) Marshallese - volleyball player.

Carolyn Hone (?) Marshallese - volleyball player.

Angelina John (?) Marshallese - volleyball player.

Niten Anni (?) Marshallese - actor and composer.

Lyel Tarkwon (?) Marshallese - actor and composer.

Jefferson Paulis (?) Marshallese - actor.

Ben Debrum Wakefield (?) Marshallese - actor and filmmaker.

Randon Jack (?) Marshallese - actor.

Jukulius Niedenthal (?) Marshallese - actor and producer.

Iohaan Anjolok (?) Marshallese - actor.

Naiko Jashua (?) Marshallese - actor.

Lucus Niedenthal (?) Marshallese - actor and composer.

Jollie Batlok (?) Marshallese - actor.

Lyle Yamane (?) Marshallese - actor.

Yasta Bolkheim (?) Marshallese - actor.

Arelong Simon (?) Marshallese - actor.

Maxter Tarkwon (?) Marshallese - actor.

Wyre Kimej (?) Marshallese - actor.

Lobie Ben (?) Marshallese - actor.

Nicholas Kirby (?) Marshallese - actor.

M - Athletes:

Todd Lyght (1969) Marshallese - football player.

Waylon Muller (1972) Marshallese - wrestler.

Roman Cress (1977) Marshallese / Unspecified White - sprinter.

Mau Penisula (1979) Marshallese / Tuvaluan - footballer.

West Nott (1982) Marshallese - tennis player.

Jared Heine (1984) Marshallese - swimmer.

Anju Jason (1987) Marshallese - taekwondo practitioner.

Timi Garstang (1987) Marshallese - sprinter.

Michael Taylor (1989) Marshallese - swimmer.

Lani Ackley (1992) Marshallese - basketball player.

Giordan Harris (1993) Marshallese - swimmer.

Kabuati Bob (1994) Marshallese - weightlifter.

Jeki Lanki (1995) Marshallese - sprinter.

Halber Pinho (1995) Marshallese - basketball player.

Daniel Langinbelik (1996) Marshallese - swimmer.

Richson Simeon (1997) Marshallese - sprinter.

Joshua Ralpho (?) Marshallese - weightlifter.

Sione Aho (?) Marshallese - shot putter.

Frederick Kurn (?) Marshallese - basketball player.

Mike Riklon (?) Marshallese - weightlifter.

Jason Sam (?) Marshallese - taekwondo practitioner.

Robert Case (?) Marshallese - basketball player.’

#marshallese fc #poc fc #fc list #rph #underused fc #task: 188 #task: marshall islands

9 notes · View notes

humidifierchinafactory · 3 years ago

Photo

Moda Summer Gifts Co., Ltd. https://www.mselectronicgifts.com Whatsapp/WeChat: 86-18938503836 --------------------- Kaihanga hoahoa Hainamana ultrasonic home armasonic homoma smokedifier, kaiwhakatuma kino

—————————————————————————————— Ingoa Hua: Muti-mahi taiepa-hangai-hanga nekehanga mo te ultrasonic sulasifialif rama rama Tauira: TD- YT 01 Te kaha tank: 200 ml Te Mana Whakatau: 2. 5 w Taonga Whakaitihia: DC- 5 v Whakatauranga I Whakatauria: 108 KHz Pūhiko: 18650, 2600 m a Tiwhikete: CE / PSE Rauemi Hua: ABS + ACYCICK Te taumaha kupenga: 360 g Raupapa Paerewa: Q / DQDZ 1 - 2017 Te waahi o te whakaputa: Hangaia i Haina Te tawhiti o nga nekehanga: i roto i te 3 mita Rahi Hua: 150 mm * 150 mm * 45 mm _________________________________________________________________________

He mirakai Ruoodier Rududier teitei, Humidifier mo te whare moenga o te hau maroke, te haina o te waitohu Humidifer Rulogy, Ultrasonic Armoma Soodutifier Kaitoha, Kaihanga Hoahoa Hainamana Horoidifier, Mini Sudimifier ki te hoko, te toa tongi, te toa ipurangi shenzhen ultrasonic arrahonic artrasonic artrasnic arramanic artrasonic viffuser Haina, Sududicier me te Disenance Openga, he Harudier Merdifier Hauadivers China, Tutorials Homemade, OEM Sudiafiers mo te Arotake Bondom, China China Haumaru Rūma, Humibifers wheketere mo nga taonga kaainga, Humibifier USB Jobber Factory China, China Hononing Horoising Sugle Sigle, Ka hokona e nga kaiwhaiwhai rongonui te tepu pouaka whakaata mo te whakapaipai o te whare, te hainatanga mo nga taonga o te kaainga, te kaiwhakanao Hainamana Jobber Hadie, Ko nga mahi a Haina e mahi ana i a Haina, ko te Hauauru Haumii, Hainamana Humidifier hou, Sudiodier hou, Sucklifier i roto i nga akoranga whare moenga mo nga taonga kaainga, Ko te Kamupene Air Paidiers pai o te Humidifier, Nga taonga haangai pono mo nga taputapu taputapu, Nga taonga whakahoahoa Mure Horahia mo nga taputapu, Whakatauhia te shenzhen ultrasonic Armasonic Direning Hoahoa Hoahoa Hoahoa, Humidicier me te Stone Stock, Hauahi Haumaruiti a Hainamana, Humidifier Homemade me pehea, Ruhocier arumoni mo nga tipu, Haina Kaihoko Kaihoko, DEhumidifistions, Humancialier arumoni mo nga tipu, he kaihokohoko pai ki te kaihokohoko Sourdicier, Skudicier mo te maroke hau maroke, hoahoa Hainamana Hoahoa Hoahoa, Hopudal Home, Rorohiko Horidier Roodifier Roodifier mo te Whakatuwheratanga o te Kaainga, Te Kaitoha o te Whakawhanautanga o te Whakawhanake Huruhi whakahoahoa, tohatoha o te Aroma Aromalifier, Haina Te Rohi Haumidi Timi Hapu Haumiru nga Kaimana. Skudicier i roto i nga ruma moenga mo nga taonga kaainga, pouaka hokohoko pouaka whakaata Aroma Awer Vaffuser me Haina Haukoi, Ko nga waitohu a te Rultrasonic Sudiosrad Brander, tino pai te hanga Hainamana Hainamana, kitea he kaiwhakatuma mini sudicier he kaiwhakarato, kaihanga o te sholizer, Nga tuhinga raupapa ma te mēra shenzhen Hainamana Awesonic Arrasonic Speffuser, Humidifier me te tank taara, te kaainga portabiarier Hainamana

0 notes

t-baba · 4 years ago

Photo

What are closures? / Hapi is back / Human friendly natural language date picking

#497 — July 17, 2020

Unsubscribe | Read on the Web

JavaScript Weekly

Super Expressive: Build Regexes in (Almost) Natural Language — A library for building regular expressions (something many developers have a problem with in their native format) using an ‘almost natural language’ approach. It’s not for me but the code examples look interesting.

Francis Stokes

📊 Billboard.js 2.0: D3.js-Powered Charts Library — Billboard.js is a chart library built on top of d3.js that supports a wide variety of chart types in all modern browsers. 2.0 is a rewrite into TypeScript plus a lot of refactoring and performance improvements.

Jae Sung Park

Get a Free T-Shirt. It Doesn’t Cost Anything to Get Started — FusionAuth provides authentication, authorization, and user management for any app: deploy anywhere, integrate with anything, in minutes. Download and Install today and we'll send you a free t-shirt.

FusionAuth sponsor

Apollo Client 3.0 Released: The Full Featured GraphQL Client — Apollo Client is commonly associated with React but it can also be used with Angular or on its own. GitHub repo.

Ben Newman (Apollo)

⚡️ Quick bytes:

So the Hapi project was originally going to come to an 'end', but now it's not. It's back!

If watching a developer ▶️ fly through 6 code katas in 11 minutes sounds entertaining to you, enjoy! He explains what he's doing too so you might learn something.

You can now start up a new Codepen by visiting pen.new.

🎧 UI Therapy is a new podcast with an interesting episode on Snowpack and Pika featuring an interview with their lead creator.

There seems to be some concern over a number of people leaving Google or the Angular team?

Adobe Flash passes off into the sunset later this year, and Ars Technica have taken a look back at its story. A nice bit of nostalgia.

💻 Jobs

JavaScript Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find a Job Through Vettery — Use Vettery to connect with growing tech teams at startups and Fortune 500 companies.

Vettery

📚 Tutorials, Opinions and Stories

What The Fork is a Closure? — A sanitized fork of a new project from React’s Dan Abramov that sets out to explain what different development concepts mean, and he has started with closures.

Dan Abramov

How To Create a GitHub Profile README — Did you know you can now create a document that’s shown on your main GitHub profile page? It’s not JavaScript specific but I imagine a lot of you would find this neat to do!

Monica Powell

How to Build Forms With React the Easy Way — Building forms with React can be frustrating. TJ VanToll suggests one way to tackle this challenge with ease. Read more.

Progress KendoReact sponsor

A Simple Explanation of Event Delegation — A useful pattern when listening for events on multiple elements using just one event handler.

Dmitri Pavlutin

Generating UUIDs at Scale on the Web — Can you trust every browser to generate globally unique identifiers at scale? Apparently yes. This sounds boring but the technicalities are more interesting than you’d initially think!

Matthieu Wipliez

Building SVG Components in React — When building responsive web apps it makes nothing but sense to use SVG as opposed to more traditional image formats. SVG stores an XML-based description of the image which can be progammatically manipulated similar to HTML. It’s tailor made to be incorporated into components.

Maciek Sakrejda

CSS Transitions in Vue.js and Nuxt.js — For when you want a little visual pizazz when data changes or is added/removed.

Timi Omoyeni

Building Strong Distributed Teams, One Pixel at a Time — Learn how eng. managers can improve teams based on three key “C” pillars: connection, communication, and collaboration.

CircleCI sponsor

Type Safe JavaScript with JSDoc — If TypeScript just isn’t your cup of tea but you see the value in types, what can you do? Remy reminds us of a popular post from 2018 with a JSDoc-based approach.

Remy Sharp

How You Might Not Need Vuex with Vue 3

Gábor Soós

🔧 Code & Tools

React Native 0.63 Released — The latest version of React Native ships with LogBox, a totally new way to monitor errors and warnings raised in development.

Mike Grabowski

Inclusive Dates: A Human-Friendly Date Picker — You can try it here. The user can type natural language phrases like “Next Friday” or “in 30 days” and the picker will move to the correct date(!)

Tommy Feldt

Hukum: Display GitHub Action Progress in the Terminal — If you’re using GitHub’s Actions CI/CD feature and want to keep a real-time eye on it, this will help. Built in Node.

abskmj

wait-on: A CLI and Node Library to Wait for Ports, Files, Sockets, etc. — For when you need to wait until files, ports, sockets, and similar resources become available (or the opposite).

Jeff Barczewski

currency.js 2.0: A Library for Handling Currencies — Built to work around floating point issues, currency.js provides a variety of useful methods and formatters for working with monetary values.

Jason Wilson

xmlbuilder2: An XML Builder Library — Convert JS objects into XML, parse and serialize XML documents, or create XML documents using chained function calls. Aimed at Node but can be used in the browser too.

Ozgur Ozcitak

Help Shape the Future of Video, Fill Out the 2020/21 Video Dev Survey

Bitmovin Inc. sponsor

vue-flux: A Responsive Image Slider with 20 Cool Transitions — See the transitions in action on the demo page. Mobile-friendly, usable via arrow keys, and includes an optional parallax component.

oscar deulos

dequal: A Tiny (305B) Utility for Check for Deep Equality

Luke Edwards

Jaxcore Bumblebee: A JavaScript Voice Application Framework — For building ‘conversational voice assistants’ (so think Alexa, Cortana, Siri, etc.)

Jaxcore Software Inc

🎨 Creative Corner

WebGazer.js: Webcam Eye Tracking in the Browser — I’m going to file this under “fun, but..” The examples are certainly neat and moderately accurate for me. A fun demo and a neat piece of work but with limited use cases, IMHO.

Brown HCI Group

by via JavaScript Weekly https://ift.tt/3fzD32h

#Javascript Branding #Javascript Weekly

0 notes

kazvent · 5 years ago

Text

Call of Duty Mobile estará disponible el 1 de octubre en iOS y Android como un juego free-to-play

https://ift.tt/31vEpE8

Activision ha anunciado que Call of Duty: Mobile estará disponible mediante Google Play (Android) y App Store (iOS) el 1 de octubre bajo el modelo free-to-play. El juego desarrollado por Timi Studio, el equipo de Tencent Games responsable de Arena of Valor y PUBG, ha sido accesible hasta ahora mediante una prueba realizada oficialmente en Canadá, Australia y Perú. Call of Duty Mobile incluirá mapas, modos, armas y personajes de toda la franquicia Call of Duty, desde las series Modern Warfare hasta Black Ops. El juego empezará con un rápido tutorial y después permitirá personalizar… Leer noticia completa y comentarios » from ElOtroLado.net https://ift.tt/2LDePrm via IFTTT

#IFTTT #ElOtroLado.net

0 notes

riichardwilson · 4 years ago

Text

How To Do More With Vue Router

About The Author

Front-end developer based in Lagos, Nigeria. He enjoys converting designs into code and building things for the web. More about Timi …

Vue Router is the official router for Vue that is mostly used for creating multiple pages living on different routes (/home, /profile) in your application but has some features that some people do not know about. In this tutorial, we’re going to learn about some amazing features the Vue Router has and how we can make use of them in our app.

Vue Router is the official router for Vue. It deeply integrates with Vue core to make building Single Page Applications with Vue a breeze. Some of its popular features include:

Dynamic Route matching.

Named Routes.

Named views.

Programmatic navigation.

These features are heavily used when developing with Vue and this is because they are part of the basics you need to understand to efficiently use the Router. But the Vue Router has some very useful features that can be very helpful in development and in this article, we’re going to take a look at them.

For the purpose of this tutorial, we’re going to be building a simple application that would help in understanding some of the concepts covered in this article. You can find all the code used in this article on GitHub. If you are interested in doing more with the router, you’ll benefit from this tutorial.

Note: This article requires a basic understanding of Vuejs and Vue Router.

Scroll Behaviour

This is the behavior that is observed when navigating from one page to another. The default behavior of Vue router is only noticeable after scrolling to a position that isn’t the top of the page. This is because, by default, the scroll position when navigating away from a page is maintained on a new page. What this means is, if you click on a link that leads to a new route ( i.e from /home to /about) in a position that is let’s say close to the footer of the current page, the new page would start from that same position instead of starting from the top of the page.

I have created a Vue application using the Vue CLI command vue create vue-router-demo, I also selected Vue Router as part of the options while setting up my app because we will be using it throughout this tutorial.

We will also need to make API calls to JSONPlaceholder, to illustrate some of the concepts using Vue router. For this, we will be using Axios. To install Axios:

# using YARN yarn add axios # or NPM npm install axios

After installing Axios, we can update our Home.vue to look like this:

<template> <div class="home"> <p v-if="loading" class="post--empty">Loading....</p> <ul v-else> <li v-for="post in posts" :key="post.id"> <router-link :to="{ name: 'Post', params: { id: post.id, post: post } }" > </router-link> </li> </ul> </div> </template> <script> // @ is an alias to /src import axios from "axios"; export default { name: "Home", data() { return { posts: null, loading: false, }; }, mounted() { this.getPosts(); }, methods: { async getPosts() { this.loading = true; try { let res = await axios({ url: "https://jsonplaceholder.typicode.com/posts", method: "GET", }); let posts = res.data; this.posts = posts; this.loading = false; } catch (error) { this.loading = false; } }, }, }; </script> <style> .home { padding: 0 30px; max-width: 800px; margin: 0 auto; } @keyframes blink { from { opacity: 1; } to { opacity: 0; } } .post--empty { height: 250px; margin-top: 30px; animation: blink 0.8s ease-in-out infinite alternate both; display: flex; align-items: center; justify-content: center; font-family: "Lobster", cursive; } ul { text-align: left; } a { color: inherit; } </style>

Here, we’re importing axios and using it to fetch a list of posts from JSONPlaceholder in the getPost method. We’re also assigning the array of posts gotten from this API call to posts from the data function from this page, this is because we want to use this data in our template section. After this, we loop through the array of posts in a list ( <ul></ul>) and also attach a link to each post using id of each post as the link param (this is called dynamic route matching). We have also added a paragraph that would serve as a loading indicator.

At this point, here’s what this page looks like:

List of posts from JSONPlaceholder. (Large preview)

The next thing would be to create the page that will display the info for each post and create a link for it in the router of our app.

Post.vue

<template> <div class="about"> <div class="post"> <h1></h1> <p v-html="post.body"></p> </div> <p>End of page</p> </div> </template> <script> export default { name: "Post", props: ["id", "post"], }; </script> <style> .post { padding: 0 30px; height: 110vh; margin: 0 auto; } p { margin: 10px 0; } </style>

Here, we make use of passing props to route components to define id and post which we’re passing from the previous page in the form of route params. This is a neat way of accessing route params and query as opposed to doing this:

Post.vue

We then make use of this post value in the template section to display post title and body. Finally, we add a paragraph to the end of the page. We also add styling for the page in the styling section, which includes defining a height of 110vh. This is because we need the page to have a height that is more than the default height 100vh so we can observe the default scroll behavior of the router.

The next thing would be to create a route that would display each post. Update your index.js file in the /router folder ( or router.js file) to look like this:

import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [{ path: '/', name: 'Home', component: Home }, { path: '/:id', name: 'Post', props: true, component: () => import ( /* webpackChunkName: "post" */ '../views/Post.vue') } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router

Here, we define a new route that makes use of id that would be passed to this route from the homepage. We’re also decoupling the router param (in this case, post and id) using props.

The top of this page looks like this:

Top of post page. (Large preview)

If we click on any of the posts on the home page that does not require us to scroll, we would not notice any weird behavior scroll wise, but if we scroll down a little and click on the last post in this list, this should be the position the /post page would land on:

Default scroll position. (Large preview)

This is bad for UX and this is because the user isn’t expecting this behavior and they might need to start from the top of a page to get the full information on the said page.

Vue Router comes with the option to customize this behavior to individual preferences, an example would be saving scroll position of a previous route when trying to move back/forward. To fix the current issue in our app, we would update our router file to include the following:

import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [...] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, //add this scrollBehavior(to, from, savedPosition) { return { x: 0, y: 0 } } }) export default router

Now, if we scroll to the bottom of the home page and click on the last post, you should notice that it now starts from the top of the page.

New scroll position. (Large preview)

Data Fetching

When fetching data from an API, we either call the method in the mounted or created lifecycle hook, these are by far the most popular methods people use when developing in Vue. Vue router comes with another method in which we make this API request before navigating to a new route by making this request using the beforeRouterEnter guard in such a component. Here is an example of how to fetch data from JSONPlaceholder using this method:

beforeRouteEnter(to, from, next) { axios .get("https://jsonplaceholder.typicode.com/posts") .then((res) => { next((vm) => vm.fetchData(res)); }) .catch((err) => { console.error(err); }); }, methods: { fetchData(res) { let post = res.data; this.posts = post; }, },

Here, we’re fetching a list of posts from an API using Axios and when this request is complete, we call next. At this point in the lifecycle of this component, this is not available because the component has not been created but we have access to vm which gives us access to the component’s instance. Inside this function, we pass the response from the API request res to our method fetchData which we’ve created to assign the value from this response to post so we can use it in our template. Now, if we refresh our / route, we would notice that the data gets updated very fast and at no time is there a blank or page ( provided the request is successful).

Transitions

Vue comes with a <transition></ transition> component that enables easy implementation of CSS transitions and animations. This feature can be extended to work for navigation between routes in Vue. Here’s an example:

<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> </div> <transition name="slide-fade"> <router-view /> </transition> </div> </template> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #nav { padding: 30px; } #nav a { font-weight: bold; color: #2c3e50; } #nav a.router-link-exact-active { color: #42b983; } .slide-fade-enter-active { transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-leave-active { transition: transform 1s cubic-bezier(1, 0.5, 0.8, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-enter { color: mediumblue; transform: translateY(20px); } .slide-fade-leave-to { transform: translateX(100px); color: cyan; } </style>

Here, we’re adding a transition with the name slide-fade to our application and wrapping it around all the route navigation that would take place in the app. We’re also adding a set of styles that control/define the way the transitions would work in our app. Without these rules, there would be no visible transition taking place. Now, if we try to navigate from the homepage to the individual posts, we would notice a sliding and fading transition taking place during the navigation process.

There are two types of route based transitions.

1. Per-route Transition

This type of transition is defined in the component that renders a route and so, it only affects the navigation to and from such a page. This gives us the ability to define a special transition for individual routes if we want. Here is an example of how to do that.

<template> // add a transition component with name and mode props <transition name="slide-fade" mode="in-out"> <div class="about"> <div class="post"> <h1></h1> <p v-html="post.body"></p> </div> <p>End of page</p> </div> </transition> </template> <script> export default { name: "Post", props: ["id", "post"], }; </script> <style> //... .slide-fade-enter-active { transition: transform 2s cubic-bezier(1, 0.5, 0.8, 1), opacity 2s ease-in; } .slide-fade-leave-active { transition: transform 2s cubic-bezier(1, 0.5, 0.8, 1), opacity 2s ease-out; } .slide-fade-enter { opacity: 1; transform: skewY(20deg); } .slide-fade-leave-to { transform: skewY(-45deg); opacity: 0.5; } </style>

If you try to navigate away from this page, we would notice the page gets skewed and fades for a duration of 2s as the navigation changes.

2. Route-Based Dynamic Transition

This is similar to the general method of adding transitions to all routes in your application but it has one major difference, that is, it accepts a dynamic transition name prop which gives you the ability to change the transition type any way you want. Let us create an example of how to do this.

We’re going to update our App.vue file with a dynamic name prop and configure it to choose a transition name depending on a value.

<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> </div> <transition :name="transitionName"> <router-view /> </transition> </div> </template> <script> export default { data() { return { transitionName: "slide-fade", }; }, watch: { $route(to, from, params) { const toParam = to.params && to.params.id ? to.params.id : 0; this.transitionName = toParam % 2 === 0 ? "slide-left" : "slide-fade"; }, }, }; </script> <style> /* add transition styles */ .slide-fade-enter-active { transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-leave-active { transition: transform 1s cubic-bezier(1, 0.5, 0.8, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-enter { color: mediumblue; transform: translateY(20px); } .slide-fade-leave-to { transform: translateX(100px); color: cyan; } .slide-left-enter-active { transition: transform 0.3s cubic-bezier(1, 0.5, 0.8, 1), color 0.5s cubic-bezier(1, 0.5, 0.8, 1); } .slide-left-leave-active { transition: transform 1s cubic-bezier(1, 0.5, 0.8, 1), color 1s cubic-bezier(1, 0.5, 0.8, 1); } .slide-left-enter { color: mediumblue; transform: translateY(20px); } .slide-left-leave-to { transform: skewY(90deg); color: cyan; } </style>

Here, we’re adding a dynamic transition name which is defined in the script section of our app. We’re also watching the $route so that whenever it changes, we run the function that checks if the current route has a param of id otherwise, we give it a value of 0. We also determine the transition name based on the type of number the id is (i.e even or odd number). Now, if we navigate between the landing page and the different posts available, we would observe there are two types of transitions occurring as we navigate.

Meta Fields And Navigation Guards

Meta Fields

Meta fields help provide extra context to a certain route. An example of such context would be if a user needs to be authenticated to access such route or not. Here’s what this looks like:

import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [{ path: '/', name: 'Home', component: Home, // add meta to this route meta: { requiresAuth: true } }, ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router

Here, we’ve added a meta property requiresAuth to the / route meaning we want users to be authenticated before they can access that route. Note that ‘requiresAuth’ is not a standard property, so you can choose any name you prefer. Whatever value you select at the end can be accessible in the $route object. This meta field at this point would not prevent unauthorized users from accessing that route, we need to hook it up to the Navigation guard.

Navigation Guard

Just as the name implies, the navigation guard helps protect and guard routes based on your preferences (i.e redirect to another page or preventing the navigation). This feature works together with the Route Meta Fields to effectively guard the routes of your application. There are 3 ways of adding router guard in our app:

1. In-component

Vue offers the option to configure your router guard for a particular route directly inside your components. Here’s an example in our Home.vue file:

<template> <div class="home"> <p v-if="loading" class="post--empty">Loading....</p> <ol v-else>  <p v-if="guest">Hi Guest</p> <li v-for="post in posts" :key="post.id"> <router-link :to="{ name: 'Post', params: { id: post.id, post: post } }" > </router-link> </li> </ol> </div> </template> <script> // @ is an alias to /src import axios from "axios"; export default { name: "Home", data() { return { posts: null, // add this property guest: false, loading: false, }; }, // add this function beforeRouteEnter(to, from, next) { if (to.matched.some((record) => record.meta.requiresAuth)) { // this route requires auth, check if logged in // if not, display guest greeting. const loggedIn = JSON.parse(localStorage.getItem("loggedIn")); if (!loggedIn) { next((vm) => { vm.guest = true; }); } else { next(); } } else { next(); // make sure to always call next()! } }, methods: {...} }; </script> <style>...</style>

Here, we’re adding a paragraph that is only visible to unauthenticated users. We also add a property that controls the visibility of this text. Finally we have a router method beforeRouteEnter in which we also connect the router guard and check if the user is authenticated or not using a value that would be manually added later. We also have an if/else statement, and inside this statement, we change the value of guest depending on the authentication of the user.

And in your App.vue, add this lifecycle to the file.

export default { mounted() { localStorage.setItem("loggedIn", false); } };

So if you refresh your app, we should see the text we added in the Home.vue file.

Guest text visible. (Large preview)

2. Per-route

We can also add a router guard to our apps per-route in our router file as another property inside the specific route object. Here’s an example:

{ path: '/', name: 'Home', component: Home, // add meta to this route meta: { requiresAuth: true }, beforeEnter: (to, from, next) => { if (to.name !== 'Home') { console.log('Per-Route navigation guard ti wa online'); next() } else next() } }

Here, we add a router guard to the / route and we’re currently just logging a random text to the console but we can do a couple of things inside this guard. Now, each time you visit the home page, you would see this in your console:

Message printed in terminal. (Large preview)

3. Globally

We also have the option of creating a router guard that works globally for every part of the app (provided it meets the guard condition). This global guard is created in the router file just like the per-route guard but instead of defining it inside a specific route object, it is defined as a method of the router instance. For an example of how it works, we’re going to create a new file and route in our app and name it guest.vue, then add the following lines of code to the file.

<template> <div> <h1>Guest page</h1> <p>You're seeing this page because you are not logged in</p> </div> </template> <script> </script> <style></style>

Next, we create a /login route with this newly created page and add a meta property to other existing routes.

// create new route { path: '/login', name: 'login', component: () => import ( /* webpackChunkName: "auth" */ '../views/guest.vue') }, { path: '/:id', name: 'Post', props: true,a // add meta property meta: { requiresAuth: true }, component: () => import ( /* webpackChunkName: "post" */ '../views/Post.vue') }

The next thing would be to create the global navigation guard for all routes that require authentication and check the user’s authentication using localStorage (previously created). We would redirect users that have a loggedIn value of false to /login.

router.beforeEach((to, from, next) => { if (to.matched.some((record) => record.meta.requiresAuth)) { // this route requires auth, check if logged in // if not, display guest greeting. const loggedIn = JSON.parse(localStorage.getItem("loggedIn")); if (!loggedIn) { next({ path: '/login' }); } else { next(); } } else { next(); // make sure to always call next()! } })

So if you check your app in your browser, you would notice it is currently on this page:

Guest page. (Large preview)

If we try to navigate to any of the existing routes, we would automatically get redirected to this page no what we do and that means our router guard is effectively guarding those routes.

Conclusion

We can see that the Vue Router is a very powerful tool that can be used for more than just creating routes in your application. We have learned how to configure the scroll behavior of routes in our application, the different ways to add transitions to routes in our app, how to fetch data from an API before a component gets mounted, how to use meta property for our routes and the different ways to set up router guard.

Resources

Vue Router

CSS Transitions In Vuejs And Nuxtjs

(ks, ra, yk, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/how-to-do-more-with-vue-router/ source https://scpie.tumblr.com/post/628084272888184832

0 notes

scpie · 4 years ago

Text

How To Do More With Vue Router

About The Author

Front-end developer based in Lagos, Nigeria. He enjoys converting designs into code and building things for the web. More about Timi …

Vue Router is the official router for Vue. It deeply integrates with Vue core to make building Single Page Applications with Vue a breeze. Some of its popular features include:

Dynamic Route matching.

Named Routes.

Named views.

Programmatic navigation.

Note: This article requires a basic understanding of Vuejs and Vue Router.

Scroll Behaviour

We will also need to make API calls to JSONPlaceholder, to illustrate some of the concepts using Vue router. For this, we will be using Axios. To install Axios:

# using YARN yarn add axios # or NPM npm install axios

After installing Axios, we can update our Home.vue to look like this:

At this point, here’s what this page looks like:

List of posts from JSONPlaceholder. (Large preview)

The next thing would be to create the page that will display the info for each post and create a link for it in the router of our app.

Post.vue

The next thing would be to create a route that would display each post. Update your index.js file in the /router folder ( or router.js file) to look like this:

Here, we define a new route that makes use of id that would be passed to this route from the homepage. We’re also decoupling the router param (in this case, post and id) using props.

The top of this page looks like this:

Top of post page. (Large preview)

Default scroll position. (Large preview)

This is bad for UX and this is because the user isn’t expecting this behavior and they might need to start from the top of a page to get the full information on the said page.

Now, if we scroll to the bottom of the home page and click on the last post, you should notice that it now starts from the top of the page.

New scroll position. (Large preview)

Data Fetching

Transitions

There are two types of route based transitions.

1. Per-route Transition

If you try to navigate away from this page, we would notice the page gets skewed and fades for a duration of 2s as the navigation changes.

2. Route-Based Dynamic Transition

We’re going to update our App.vue file with a dynamic name prop and configure it to choose a transition name depending on a value.

Meta Fields And Navigation Guards

Meta Fields

Meta fields help provide extra context to a certain route. An example of such context would be if a user needs to be authenticated to access such route or not. Here’s what this looks like:

Navigation Guard

1. In-component

Vue offers the option to configure your router guard for a particular route directly inside your components. Here’s an example in our Home.vue file:

And in your App.vue, add this lifecycle to the file.

export default { mounted() { localStorage.setItem("loggedIn", false); } };

So if you refresh your app, we should see the text we added in the Home.vue file.

Guest text visible. (Large preview)

2. Per-route

We can also add a router guard to our apps per-route in our router file as another property inside the specific route object. Here’s an example:

Message printed in terminal. (Large preview)

3. Globally

<template> <div> <h1>Guest page</h1> <p>You're seeing this page because you are not logged in</p> </div> </template> <script> </script> <style></style>

Next, we create a /login route with this newly created page and add a meta property to other existing routes.

So if you check your app in your browser, you would notice it is currently on this page:

Guest page. (Large preview)

If we try to navigate to any of the existing routes, we would automatically get redirected to this page no what we do and that means our router guard is effectively guarding those routes.

Conclusion

Resources

Vue Router

CSS Transitions In Vuejs And Nuxtjs

(ks, ra, yk, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/how-to-do-more-with-vue-router/ source https://scpie1.blogspot.com/2020/09/how-to-do-more-with-vue-router.html

0 notes

nunanibre-blog · 4 years ago

Text

Artesanato em Feltro Para Iniciantes

Artesanato de feltro para iniciantes são alguns dos artesanatos mais agradáveis de se fazer. O feltro é um material de artesanato tão maravilhoso por si só, adequado para artesanato tradicional para adultos e para artesanato infantil muito fácil. Você pode fazer uma grande variedade de artesanato usando feltro artesanal, e nossos projetos mais fáceis estão ao seu alcance.

Quais são os tipos de feltro? Há feltro de artesanato, feltro ecológico, feltro de lã misturado, feltro de lã 100% e tecido de lã 100%, entre outros! O feltro artesanal é o principal objetivo dos projetos de artesanato infantil e outros projetos baratos que você deseja criar, enquanto os feltros de lã podem ser usados para projetos vestíveis, acessórios e outras idéias sofisticadas. Você pode aprender mais sobre os 5 tipos de feltro em nosso artigo útil.

O feltro é um material fantástico para trabalhar. É fácil, barato e você pode fazer tantos projetos! Ele não se espalha como outras artes de fibras, e é tão conveniente simplesmente cortar as formas com uma tesoura e partir. Se você está se perguntando, pode lavar o feltro de artesanato? Sim, pode, o que é outro motivo pelo qual esse material é tão bom.

Você também pode sentir a lã que você já tem em mãos. Recicle os materiais que você tem em mãos para criar projetos de feltro. Se você está se perguntando como sentir a lã, temos dois excelentes tutoriais que ensinarão como!

Como Sentir Lã Na Lavadora e Secadora (tutorial focado na agitação) Blusas de lã para feltragem (lavagem / foco seco) Bônus! Como sentir caxemira Encontre toneladas de coisas para fazer com folhas de feltro em nossa bela galeria de projetos abaixo. Este índice de tutoriais em feltro oferecerá a você inspiração para os próximos meses!

Reunir materiais:

Use todo e qualquer material listado abaixo, conforme necessário para seus projetos.

-Folhas de feltro com padrões e cores de sua escolha Tesoura afiada -Cola quente -Fios e agulhas de bordado -Botões -Snaps -Enfeites como lantejoulas, pérolas e cristais -Fio floral -Limpadores de cano

Antes de começar, aqui estão algumas ótimas dicas para trabalhar com feltro de nossos leitores:

"Sempre use uma boa tesoura afiada e tenha cuidado quando for esticada com facilidade." - Charlotte K.

"Você pode usar matrizes para cortar seus pedaços." - Maryann S.

"Eu faço bichinhos de pelúcia; coloque um sino dentro do seu gatinho." - Timi M.

A costura é um projeto essencial para feltro de artesanato, especialmente quando se trata de costura manual ou bordado para iniciantes. É incrível o que projetos lindos você pode fazer com feltro e uma máquina de costura. Suas necessidades de decoração e outros desejos serão atendidos por alguns dos lindos tutoriais de costura de feltro abaixo. Confira a galeria de artesanato em feltro para adultos; você pode ter uma reação semelhante ao entrar no Mercado Mundial ou em qualquer outra loja de artigos domésticos favoritos.

0 notes

douglassmiith · 5 years ago

Text

Getting Started With Axios In Nuxt

About The Author

Front-end developer based in Lagos, Nigeria. He enjoys converting designs into code and building things for the web. More about Timi …

In this tutorial, we will learn how to make a request in our NUXt.js applications using the Axios module. We will also learn how to use the ayncData and fetch methods to fetch data on the server-side using Axios and the differences between the two methods. Finally, we will learn how to add authentication to our application using the Auth module.

NUXt.js provides an Axios module for easy integration with your application. Axios is a promise-based HTTP client that works in the browser and Node.js environment or, in simpler terms, it is a tool for making requests (e.g API calls) in client-side applications and Node.js environment.

In this tutorial, we’re going to learn how to use the Axios module and how to make a request on the server-side using asyncData and fetch. These two methods make a request on the server-side but they have some differences which we’re also going to cover. Finally, we’ll learn how to perform authentication and secure pages/routes using the auth module and auth middleware.

This article requires basic knowledge of NUXtjs and Vuejs as we’ll be building on top of that. For those without experience with Vuejs, I recommend you start from their official documentation and the Nuxt official page before continuing with this article.

What Is The Nuxt.js Axios Module?

According to the official Documentation,

“It is a Secure and easy Axios integration with NUXt.js.”

Here are some of its features:

Automatically set base URL for client-side & server-side.

Proxy request headers in SSR (Useful for auth).

Fetch Style requests.

Integrated with NUXt.js Progressbar while making requests.

To use the axios module in your application, you will have to first install it by using either npm or yarn.

YARN

yarn add @nUXtjs/axios

NPM

npm install @nUXtjs/axios

Add it into your nUXt.config.js file:

modules: [ '@nUXtjs/axios', ], axios: { // extra config e.g // BaseURL: 'https://link-to-API' }

The modules array accepts a list of NUXt.js modules such as dotenv, auth and in this case, Axios. What we’ve done is to inform our application that we would be using the Axios module, which we reference using @nUXtjs/axios. This is then followed by the axios property which is an object of configurations like the baseURL for both client-side and server-side.

Now, you can access Axios from anywhere in your application by calling this.$axios.method or this.$axios.$method. Where method can be get, post, or delete.

Making Your First Request Using Axios

For this tutorial, I’ve put together a simple application on Github. The repository contains two folders, start and finish, the start folder contains all you need to get right into the tutorial. The finish folder contains a completed version of what we would be building.

After cloning the repo and opening the start folder, we would need to install all our packages in the package.json file so open your terminal and run the following command:

npm install

Once that is done, we can start our app using the npm run dev command. This is what you should see when you go to localhost:3000.

Our application’s landing page. (Large preview)

The next thing we have to do is to create a .env file in the root folder of our application and add our API URL to it. For this tutorial, we’ll be using a sample API built to collect reports from users.

API_URL=https://ireporter-endpoint.herokuapp.com/api/v2/

This way, we do not have to hard code our API into our app which is useful for working with two APIs (development and production).

The next step would be to open our nUXt.config.js file and add the environmental variable to our axios config that we added above.

/* ** Axios module configuration */ axios: { // See https://github.com/nUXt-community/axios-module#options baseURL: process.env.API_URL, },

Here, we tell NUXt.js to use this baseURL for both our client-side and server-side requests whenever we use this Axios module.

Now, to fetch a list of reports, let us open the index.vue file and add the following method to the script section.

async getIncidents() { let res = await this.$store.dispatch("getIncidents"); this.incidents = res.data.data.incidents;}

What we have done is to create an async function that we call getIncidents() and we can tell what it does from the name — it fetches a list of incidents using the Vuex store action method this.$store.dispatch. We assign the response from this action to our incidents property so we can be able to make use of it in the component.

We want to call the getIncidents() method whenever the component mounts. We can do that using the mounted hook.

mounted() { this.getIncidents() }

mounted() is a lifecycle hook that gets called when the component mounts. That will cause the call to the API to happen when the component mounts. Now, let us go into our index.js file in our store and create this action where we’ll be making our Axios request from.

export const actions = { async getIncidents() { let res = await this.$axios.get('/incidents') return res; }}

Here, we created the action called getIncidents which is an async function, then we await a response from the server and return this response. The response from this action is sent back to our getIncidents() method in our index.vue file.

If we refresh our application, we should now be able to see a long list of incidents rendered on the page.

List of incidents on landing page. (Large preview)

We have made our first request using Axios but we won’t stop there, we are going to be trying out asyncData and fetch to see the differences between them and using Axios.

AsyncData

AsyncData fetches data on the server-side and it’s called before loading the page component. It does not have access to this because it is called before your page component data is created. this is only available after the created hook has been called so NUXt.js automatically merges the returned data into the component’s data.

Using asyncData is good for SEO Company because it fetches your site’s content on the server-side and also helps in loading content faster. Note that asyncData method can only be used in the pages folder of your application as it would not work in the components folder. This is because asyncData hook gets called before your component is created.

Image from NUXt blog. (Large preview)

Let us add asyncData to our index.vue file and observe how fast our incidents data loads. Add the following code after our components property and let us get rid of our mounted hook.

async asyncData({ $axios }) { let { data } = await $axios.get("/incidents"); return { incidents: data.data.incidents }; }, // mounted() { // this.getIncidents(); // },

Here, the asyncData method accepts a property from the context $axios. We use this property to fetch the list of incidents and the value is then returned. This value is automatically injected into our component. Now, you can notice how fast your content loads if you refresh the page and at no time is there no incident to render.

Fetch

The Fetch method is also used to make requests on the server-side. It is called after the created hook in the life cycle which means it has access to the component’s data. Unlike the asyncData method, the fetch method can be used in all .vue files and be used with the Vuex store. This means that if you have the following in your data function.

data() { return { incidents: [], id: 5, gender: 'male' };}

You can easily modify id or gender by calling this.id or this.gender.

Using Axios As A Plugin

During the process of development with Axios, you might find that you need extra configuration like creating instances and interceptors for your request so your application can work as intended and thankfully, we can do that by extending our Axios into a plugin.

To extend axios, you have to create a plugin (e.g. axios.js) in your plugins folder.

export default function ({ $axios, store, redirect}) { $axios.onError(error => { if (error.response && error.response.status === 500) { redirect('/login') } }) $axios.interceptors.response.use( response => { if (response.status === 200) { if (response.request.responseURL && response.request.responseURL.includes('login')) { store.dispatch("setUser", response); } } return response } )}

This is an example of a plugin I wrote for a NUXt application. Here, your function takes in a context object of $axios, store and redirect which we would use in configuring the plugin. The first thing we do is to listen for an error with a status of 500 using $axios.onError and redirect the user to the login page.

We also have an interceptor that intercepts every request response we make in our application checks if the status of the response we get is 200. If that is true we proceed and check that there is a response.request.responseURL and if it includes login. If this checks out to be true, we then send this response using our store’s dispatch method where it then mutated in our state.

Add this plugin to your nUXt.config.js file:

plugins: [ '~/plugins/axios' ]

After doing this, your Axios plugin would intercept any request you make and check if you have defined a special case for it.

Introduction To The Auth Module

The auth module is used for performing authentication for your NUXt application and can be accessed from anywhere in your application using $this.auth. It is also available in fetch, asyncData, middleware and NUXtInitServer from the context object as $auth.

The context provides additional objects/params from NUXt to Vue components and is available in special nUXt lifecycle areas like those mentioned above.

To use the auth module in your application, you would have to install it using yarn or npm.

YARN

yarn add @nUXtjs/auth

NPM

npm install @nUXtjs/auth

Add it to your nUXt.config.js file.

modules: [ '@nUXtjs/auth'],auth: { // Options}

The auth property accepts a list of properties such as strategies and redirect. Here, strategies accepts your preferred authentication method which can be:

local For username/email and password-based flow.

Facebook For using Facebook accounts as a means of authentication.

Github For authenticating users with Github accounts.

Google For authenticating users with Google accounts.

Auth0

Laravel Passport

The redirect property accepts an object of links for:

logout Users would be redirected here if after logout current route is protected.

home Users would be redirected here after login.

Now, let us add the following to our nUXt.config.js file.

/* ** Auth module configuration */auth: { redirect: { login: '/login', logout: '/', home: '/my-reports' }, strategies: { local: { endpoints: { login: { url: "/user/login", method: "post", propertyName: "data.token", }, logout: false, user: false, }, tokenType: '', tokenName: 'x-auth', autoFetchUser: false }, },}

Please note that the auth method works best when there is a user endpoint provided in the option above.

Inside the auth config object, we have a redirect option in which we set our login route to /login, logout route to / and home route to /my-reports which would all behave as expected. We also have a tokenType property which represents the Authorization type in the header of our Axios request. It is set to Bearer by default and can be changed to work with your API.

For our API, there is no token type and this is why we’re going to leave it as an empty string. The tokenName represents the Authorization name (or the header property you want to attach your token to) inside your header in your Axios request.

By default, it is set to Authorization but for our API, the Authorization name is x-auth. The autoFetchUser property is used to enable user fetch object using the user endpoint property after login. It is true by default but our API does not have a user endpoint so we have set that to false.

For this tutorial, we would be using the local strategy. In our strategies, we have the local option with endpoints for login, user and logout but in our case, we would only use the *login* option because our demo API does not have a *logout* endpoint and our user object is being returned when *login* is successful.

Note: The auth module does not have a register endpoint option so that means we’re going to register the traditional way and redirect the user to the login page where we will perform the authentication using this.$auth.loginWith. This is the method used in authenticating your users. It accepts a ‘strategy’ (e.g local) as a first argument and then an object to perform this authentication with. Take a look at the following example.

let data { email: '[email protected]', password: '123456'}this.$auth.loginWith('local', { data })

Using The Auth Module

Now that we have configured our auth module, we can proceed to our registration page. If you visit the /register page, you should see a registration form.

Let us make this form functional by adding the following code:

methods: { async registerUser() { this.loading = true; let data = this.register; try { await this.$axios.post("/user/create", data); this.$router.push("/login"); this.loading = false; this.$notify({ group: "success", title: "Success!", text: "Account created successfully" }); } catch (error) { this.loading = false; this.$notify({ group: "error", title: "Error!", text: error.response ? error.response.data.error : "Sorry an error occured, check your internet" }); } }}

Here, we have an async function called registerUser which is tied to a click event in our template and makes an Axios request wrapped in a try/catch block to an endpoint /user/create. This redirects to the /login page and notifies the user of a successful registration. We also have a catch block that alerts the user of any error if the request is not successful.

If the registration is successful, you would be redirected to the login page.

Here, we’re going to make use of auth authentication method this.$auth.loginWith('local', loginData) after which we would use the this.$auth.setUser(userObj) to set the user in our auth instance.

To get the login page working, let’s add the following code to our login.vue file.

methods: { async logIn() { let data = this.login; this.loading = true; try { let res = await this.$auth.loginWith("local", { data }); this.loading = false; let user = res.data.data.user; this.$auth.setUser(user); this.$notify({ group: "success", title: "Success!", text: "Welcome!" }); } catch (error) { this.loading = false; this.$notify({ group: "error", title: "Error!", text: error.response ? error.response.data.error : "Sorry an error occured, check your internet" }); } }}

We created an async function called logIn using the auth method this.$auth.loginWith('local, loginData). If this login attempt is successful, we then assign the user data to our auth instance using this.$auth.setUser(userInfo) and redirect the user to the /my-report page.

You can now get user data using this.$auth.user or with Vuex using this.$store.state.auth.user but that’s not all. The auth instance contains some other properties which you can see if you log in or check your state using your Vue dev tools.

If you log this.$store.state.auth to the console, you’ll see this:

{ "auth": { "user": { "id": "d7a5efdf-0c29-48aa-9255-be818301d602", "email": "[email protected]", "lastName": "Xo", "firstName": "Tm", "othernames": null, "isAdmin": false, "phoneNumber": null, "username": null }, "loggedIn": true, "strategy": "local", "busy": false }}

The auth instance contains a loggedIn property that is useful in switching between authenticated links in the nav/header section of your application. It also contains a strategy method that states the type of strategy the instance is running (e.g local).

Now, we will make use of this loggedIn property to arrange our nav links. Update your navBar component to the following:

<template> <header class="header"> <div class="logo"> <nUXt-link to="/"> <Logo /> </nUXt-link> </div> <nav class="nav"> <div class="nav__user" v-if="auth.loggedIn"> <p></p> <button class="nav__link nav__link--long"> <nUXt-link to="/report-incident">Report incident</nUXt-link> </button> <button class="nav__link nav__link--long"> <nUXt-link to="/my-reports">My Reports</nUXt-link> </button> <button class="nav__link" @click.prevent="logOut">Log out</button> </div> <button class="nav__link" v-if="!auth.loggedIn"> <nUXt-link to="/login">Login</nUXt-link> </button> <button class="nav__link" v-if="!auth.loggedIn"> <nUXt-link to="/register">Register</nUXt-link> </button> </nav> </header></template><script>import { mapState } from "vuex";import Logo from "@/components/Logo";export default { name: "nav-bar", data() { return {}; }, computed: { ...mapState(["auth"]) }, methods: { logOut() { this.$store.dispatch("logOut"); this.$router.push("/login"); } }, components: { Logo }};</script><style></style>

In our template section, we have several links to different parts of the application in which we are now using auth.loggedIn to display the appropriate links depending on the authentication status. We have a logout button that has a click event with a logOut() function attached to it. We also display the user’s email gotten from the auth property which is accessed from our Vuex store using the mapState method which maps our state auth to the computed property of the nav component. We also have a logout method that calls our Vuex action logOut and redirects the user to the login page.

Now, let us go ahead and update our store to have a logOut action.

export const actions = { // .... logOut() { this.$auth.logout(); }}

The logOut action calls the auth logout method which clears user data, deletes tokens from localStorage and sets loggedIn to false.

Routes like /my-reports and report-incident should not be visible to guests but at this point in our app, that is not the case. NUXt does not have a navigation guard that can protect your routes, but it has is the auth middleware. It gives you the freedom to create your own middleware so you can configure it to work the way you want.

It can be set in two ways:

Per route.

Globally for the whole app in your nUXt.config.js file.

router: { middleware: ['auth']}

This auth middleware works with your auth instance so you do not need to create an auth.js file in your middleware folder.

Let us now add this middleware to our my-reports.vue and report-incident.vue files. Add the following lines of code to the script section of each file.

middleware: 'auth'

Now, our application would check if the user trying to access these routes has an auth.loggedIn value of true. It’ll redirect them to the login page using our redirect option in our auth config file — if you’re not logged in and you try to visit either /my-report or report-incident, you would be redirected to /login.

If you go to /report-incidents, this is what you should see.

Report incident page. (Large preview)

This page is for adding incidents but that right now the form does not send incident to our server because we are not making the call to the server when the user attempts to submit the form. To solve this, we will add a reportIncident method which will be called when the user clicks on Report. We’ll have this in the script section of the component. This method will send the form data to the server. Update your report-incident.vue file with the following:

<template> <section class="report"> <h1 class="report__heading">Report an Incident</h1> <form class="report__form"> <div class="input__container"> <label for="title" class="input__label">Title</label> <input type="text" name="title" id="title" v-model="incident.title" class="input__field" required /> </div> <div class="input__container"> <label for="location" class="input__label">Location</label> <input type="text" name="location" id="location" v-model="incident.location" required class="input__field" /> </div> <div class="input__container"> <label for="comment" class="input__label">Comment</label> <textarea name="comment" id="comment" v-model="incident.comment" class="input__area" cols="30" rows="10" required ></textarea> </div> <input type="submit" value="Report" class="input__button" @click.prevent="reportIncident" /> <p class="loading__indicator" v-if="loading">Please wait....</p> </form> </section></template><script>export default { name: "report-incident", middleware: "auth", data() { return { loading: false, incident: { type: "red-flag", title: "", location: "", comment: "" } }; }, methods: { async reportIncident() { let data = this.incident; let formData = new FormData(); formData.append("title", data.title); formData.append("type", data.type); formData.append("location", data.location); formData.append("comment", data.comment); this.loading = true; try { let res = await this.$store.dispatch("reportIncident", formData); this.$notify({ group: "success", title: "Success", text: "Incident reported successfully!" }); this.loading = false; this.$router.push("/my-reports"); } catch (error) { this.loading = false; this.$notify({ group: "error", title: "Error!", text: error.response ? error.response.data.error : "Sorry an error occured, check your internet" }); } } }};</script><style></style>

Here, we have a form with input fields for title, location, and comment with two-way data binding using v-model. We also have a submit button with a click event. In the script section, we have a reportIncident method that collects all the information provided in the form and is sent to our server using FormData because the API is designed to also accept images and videos.

This formData is attached to a Vuex action using the dispatch method, if the request is successful, you get redirected to /my-reports with a notification informing you that this request was successful otherwise, you would be notified of an error with the error message.

At this point, we don’t have reportIncident action in our store yet so in your browser console, you would see an error if you try to click submit on this page.

Vuex error message. (Large preview)

To fix this, add the reportIncident action your index.js file.

export const actions = { // ... async reportIncident({}, data) { let res = await this.$axios.post('/incident/create', data) return res; }}

Here, we have a reportIncident function that takes in an empty context object and the data we’re sending from our form. This data is then attached to a post request that creates an incident and returns back to our report-incident.vue file.

At this point, you should be able to add a report using the form after which you would be redirected to /my-reports page.

My reports page empty. (Large preview)

This page should display a list of incidents created by the user but right now it only shows what we see above, let’s go ahead to fix that.

We’re going to be using the fetch method we learned about to get this list. Update your my-reports.vue file with the following:

Here, we use fetch method to get user-specific incidents and assign the response to our incidents array.

If you refresh your page after adding an incident, you should see something like this.

My Reports page with a report. (Large preview)

At this point, we would notice a difference in how fetch method and asyncData loads our data.

Conclusion

So far, we have learned about the Axios module and all of its features. We have also learned more about asyncData, and how we can fetch both of them together despite their differences. We’ve also learned how to perform authentication in our application using the auth module and how to use the auth middleware to protect our routes. Here are some useful resources that talk more about all we’ve covered.

Resources

“Auth Module,” NUXtJS.org

“Axios Module: Introduction,” NUXtJS.org

FormData, MDN web docs

“API: The asyncData Method,” NUXtJS.org

“The Vue Instance: Lifecycle Diagram,” VueJS.org

“Understanding How fetch Works In Nuxt 2.12,” NUXtJS.org

(ks, ra, yk, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

Via http://www.scpie.org/getting-started-with-axios-in-nuxt/

source https://scpie.weebly.com/blog/getting-started-with-axios-in-nuxt

0 notes