Src/main.js represents the starting point of our Vue application. The src/ folder is where we’ll be working directly from: $ ls src/ Since our focus is on the usage of Vue.js, the application already has all the custom CSS laid out. In the tag of the index.html file, we introduce Bulma as our application’s CSS framework and our own styles.css file that lives in the public/ folder. Index.html is where we declare the DOM element- #app- with which we’ll use to mount our Vue application: This project is a simple webpack-configured application scaffolded with vue-cli, the Vue command line interface. Let’s take a brief look within the project directory. When cloned, install the project dependencies with: npm install The easiest way to follow along step-by-step (if you wish to do so) is to clone the GitHub repo I’ve set up. Now that we have an idea of what we’ll be working on, let’s start building! Preparing the App These are some of the main benefits of creating routes within an application. This would allow users to refresh different pages and keep their location in the app, bookmark the URLs to come back to later, and potentially share the URL with others. We’d want our Pokémon app to be accessible and to show different details for different pathnames: /charizard, /blastoise, and /venusaur. Though the app would functionally work, it misses a substantial feature that’s expected from most web applications- responding to browser navigation events. See the Pen Vue Pokemon by Hassan Dj ( on CodePen. This particular app could be composed of a simple parent-child component hierarchy that uses Vue props to dictate the information that should be displayed. In addition, footer links exist at the bottom of the application to direct the user to each respective route upon click: Do We Even Need Routing for This?įor simple applications like this, we don’t necessarily need a client-side router to make our app functional. Based on the URL route entered, a different Pokémon will be shown: The application will have three unique URL routes: /charizard, /blastoise, and /venusaur. The app we aim to construct is a simple Pokémon app that displays details of a particular Pokémon based on the URL route. Now that we have a brief understanding of client-side routing and SPAs, let’s get an overview of what we’ll be working on! Case Study: Pokémon With routing in SPAs, JavaScript is the driving force that dynamically renders different UI. SPAs are web apps that load only once and are dynamically updated with user interaction without the need to make subsequent requests to the server. Any changes to the application UI based on URL routes are then handled on the client.Ĭlient-side routing is where the term single-page application (or SPA for short) comes in.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |