{
  "$type": "site.standard.document",
  "description": "My deep dive into learning Ionic and Vue.",
  "path": "/blog/ionic-and-vue-part-two",
  "publishedAt": "2023-04-26T00:00:00.000Z",
  "site": "at://did:plc:gevyqibw5p2xsonkbsbjm5vy/site.standard.publication/3mnqgth7gxo2f",
  "tags": [
    "ionic",
    "vue",
    "framework",
    "learning",
    "javascript",
    "typescript",
    "ionicparttwo"
  ],
  "textContent": "The Ionic Framework logo, a blue circle enclosed in a thick blue, incomplete line with a small blue ball rotating around the center circle, next to the Vue JS logo, a Vshaped logo with a light green V and a slate grey blue smaller V sitting inside the large Vshape.(https://res.cloudinary.com/colabottles/image/upload/v1670038063/images/vueioniclogos.png)\r\n\r\nIt has been a bit, but following up on the first part(https://toddl.dev/posts/ionicandvuepartone/) of this series, I'm going to be diving into file structure, so pitter patter, let's get at &apos;er&excl;\r\n\r\n File Structure\r\n\r\n NOTE: This is an introductory overview and this section is from the generated files and folders from running the ionic start command. There are more folders and more comprehensive ways to set things up. This is my experience through the Ionic CLI.\r\n\r\n This also takes into consideration you have familiarity with the node_modules folder and test folder if you're testing with Jest and/or Cypress. I will be going over the testing stuff later on in this series.\r\n\r\n src\r\n\r\nThis folder is where the bulk of the work will be done to create your application. This folder is where much of the work, and frankly nearly all of the work will be done in.\r\n\r\nThe file structure shown for a Vue and Ionic template showing files in the src folder.(https://res.cloudinary.com/colabottles/image/upload/v1682433572/vueexample.png)\r\n\r\n router\r\n\r\nThe router folder is where all the routes are kept, added, and each route has its View component with route name. So the index.ts file will point to the HomePage.vue file. The route points to the HomePage view.\r\n\r\nThe Home route is defined as the default path.\r\n\r\njs\r\nimport HomePage from '../views/HomePage.vue'\r\n\r\n\r\n theme\r\n\r\nThis is the folder that holds the stylesheets for your project. You can find out more about theming(https://ionicframework.com/docs/theming/basics) from the Ionic docs here.\r\n\r\nGlobal theming for the project can be defined here, Ionic has such names as success, danger, warning, and more for colors for different elements in the UI.\r\n\r\n views\r\n\r\nThe views folder is what is render for what page. HomePage.vue is rendered when the Home route is defined in the index.ts file. The same would be for ContactPage.vue, AboutPage.vue, and others.\r\n\r\nThe home page code looks something like this:\r\n\r\njs\r\n<template\r\n  <ionpage\r\n    <ionheader :translucent=\"true\"\r\n      <iontoolbar\r\n        <iontitleBlank</iontitle\r\n      </iontoolbar\r\n    </ionheader\r\n\r\n    <ioncontent :fullscreen=\"true\"\r\n      <ionheader collapse=\"condense\"\r\n        <iontoolbar\r\n          <iontitle size=\"large\"Blank</iontitle\r\n        </iontoolbar\r\n      </ionheader\r\n\r\n      <div id=\"container\"\r\n        <strongReady to create an app?</strong\r\n        <pStart with Ionic\r\n          <a\r\n          target=\"_blank\"\r\n          rel=\"noopener noreferrer\"\r\n          href=\"https://ionicframework.com/docs/components\"\r\n          UI Components\r\n          </a\r\n        </p\r\n      </div\r\n    </ioncontent\r\n  </ionpage\r\n</template\r\n\r\n<script setup lang=\"ts\"\r\nimport { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';\r\n</script\r\n\r\n<style scoped\r\ncontainer {\r\n  textalign: center;\r\n  position: absolute;\r\n  left: 0;\r\n  right: 0;\r\n  top: 50%;\r\n  transform: translateY(50%);\r\n}\r\n\r\ncontainer strong {\r\n  fontsize: 20px;\r\n  lineheight: 26px;\r\n}\r\n\r\ncontainer p {\r\n  fontsize: 16px;\r\n  lineheight: 22px;\r\n  color: 8c8c8c;\r\n  margin: 0;\r\n}\r\n\r\ncontainer a {\r\n  textdecoration: none;\r\n}\r\n</style\r\n\r\n\r\nI won't go into the specifics here until another installment of this series, but it won't be too long before I dive into that part.\r\n\r\n Next Steps\r\n\r\nAgain, this was a very highlevel overview of the file structure of the Ionic/Vue application and the major parts of the folder structure.\r\n\r\nI'll get more into the deeper parts of the template files, router, and more later in the series.\r\n\r\n< Part three of the series is here if you want to read on(https://toddl.dev/posts/ionicandvuepartthree.md)",
  "title": "Ionic and Vue, Part Two"
}