Materio

# Folder Structure

# @core

This directory contains our core files and you are not intended to change these files.

# @fake-db

It contains fake data we get back from API. This is only useful if you want to check what API call returns in response.

# assets

It contains logos and other static assets. You can place your static assets here.

# components

Place your component in this directory. Components in this dir will be auto-registered and on-demand, thanks to unplugin-vue-components (opens new window).

How it will auto register components on demand 🤯
  1. Just create new component in components directory
  2. Reference it in Pascal case name in any file

Example:

It will automatically turn this

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

into this

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
import HelloWorld from './src/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
}
</script>

read more here (opens new window).

# layouts

Place your app's layouts in this directory. This is used in conjunction with vite-plugin-pages (opens new window) which is used for pages directory to generate routes based on directory structure just like nuxt (opens new window).

This directory contains vertical nav & horizontal nav items. Items written in /src/navigation/vertical/index.ts will be for vertical nav and items written in /src/navigation/horizontal/index.ts will be for horizontal nav. Both files are imported in /src/layouts/default.vue).

Related: Fetching navigation items from database via API
Related: How to create vertical navigation
Related: How to create horizontal navigation

# pages

Contains your app pages. Just create a new file and new route will be auto generated based on file name and its placement in the pages directory.

Show me basic example 👀

  1. Create a new file in pages directory /src/pages/about.vue with following content

    <template>
  <p>This is about page</p>
</template>

  2. Visit http://localhost:3000/about (opens new window)

✨ Route is auto generated based on your file name

Related: How to create a new page

# plugins

This directory contains plugins we used in our template.

# router

This directory contains configuration related to router. It doesn't have any routes as they are auto generated but it has ACL configurations.

# stores

This contains pinia (opens new window) store. With our template we haven't used any store so it is empty.

# styles

You can write your styles in this directory.

  • _variables.scss: Use this file to override variables

  • styles.scss: Use this to write your custom styles

← Colors & Themes →