My Project Idea
I have a vision to create an innovative exercise warm-up application. The app will be divided into two main sections: a workout tab and a settings tab. The user journey will start with selecting a workout plan, then choosing specific exercises, followed by inputting the weight for each exercise to generate a customized warm-up routine.
All the components required for these functionalities are currently operational and seamlessly connected in a linear progression.
Goal of the Project
My objective is to introduce tabbed navigation within the app interface. This feature would allow users to easily switch between the settings section and the workout section using designated tabs labeled as 'Settings' and 'Workout.'
The Challenge I am Facing
After integrating ion-tabs into the application, the main tab buttons properly display the intended components (ChooseWorkout.vue and Settings.vue) upon selection. However, a critical issue arises where the router functionality stops working correctly. As a result, navigating from ChooseWorkout.vue to ChooseLifts.vue leads to a blank screen, even though the tab indicators at the bottom of the app remain visible.
The URL structure during this transition is noted as http://localhost:8080/#/lifts/StrongLifts%205x5 (prior to ion-tabs integration, only
Key Code Snippets
App.vue
<template>
<div id="app">
<ion-app>
<ion-tabs>
<ion-tab tab="workout">
<ion-vue-router />
</ion-tab>
<ion-tab tab="settings">
<Settings />
</ion-tab>
<template slot="bottom">
<ion-tab-bar>
<ion-tab-button tab="workout">
<ion-icon name="body-outline" />
<ion-label>Workouts</ion-label>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-icon name="body-outline" />
<ion-label>Settings</ion-label>
</ion-tab-button>
</ion-tab-bar>
</template>
</ion-tabs>
</ion-app>
</div>
</template>
COPY TO CLIPBOARD SELECT ALL
ChooseWorkout.vue
<template>
<ion-page>
<ion-header>
<ion-toolbar color="primary">
<ion-title>Choose Workout</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list>
<div v-for="workout in workouts" v-bind:key="workout">
<ion-item>
<ion-label>
<h1>{{workout.name}}</h1>
<p>{{workout.by}}</p>
</ion-label>
<router-link :to="{path:`lifts/${workout.name} `}">
<ion-button>Select</ion-button>
</router-link>
</ion-item>
</div>
</ion-list>
</ion-content>
</ion-page>
</template>
<script>
import { add } from "ionicons/icons";
import { addIcons } from "ionicons";
addIcons({
"ios-add": add.ios,
"md-add": add.md
});
export default {
name: 'ChooseWorkout',
data() {
return {
workouts: [
{name: 'Starting Strength', by: 'Mark Rippetoe'},
{name: 'StrongLifts 5x5', by: 'Mehdi'},
{name: 'GreySkull LP', by: 'John Sheaffer'},
{name: 'Max Single', by: 'n/a'}
]
}
},
methods: {
}
};
</script>
<style scope></style>
main.js
const router = new IonicVueRouter({
routes: [
{
path: "/",
redirect: "/workout"
},
{
path: "/settings",
name: "settings",
component: Settings
},
{
path: "/workout",
component: ChooseWorkout
},
{
path: "/lifts/:workout",
component: ChooseLifts
},
{
path: "/lifts/:workout/:excercise",
component: ChooseWeight
},
]
});