Ionic and Vue, Part Two

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)

It 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 'er!

File Structure

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.

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.

src

This 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.

The 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)

router

The 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.

The Home route is defined as the default path.

js import HomePage from '../views/HomePage.vue'

theme

This 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.

Global 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.

views

The 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.

The home page code looks something like this:

js <template <ionpage <ionheader :translucent="true" <iontoolbar <iontitleBlank</iontitle </iontoolbar </ionheader

<ioncontent :fullscreen="true"
  <ionheader collapse="condense"
    <iontoolbar
      <iontitle size="large"Blank</iontitle
    </iontoolbar
  </ionheader

  <div id="container"
    <strongReady to create an app?</strong
    <pStart with Ionic
      <a
      target="_blank"
      rel="noopener noreferrer"
      href="https://ionicframework.com/docs/components"
      UI Components
      </a
    </p
  </div
</ioncontent

</ionpage </template