chore: use pascal case for custom components

This commit is contained in:
lstoeferle 2021-03-01 21:53:04 +01:00
parent 2796386148
commit 13b8073659
5 changed files with 16 additions and 17 deletions

View File

@ -2,7 +2,7 @@
<div id="app"> <div id="app">
<Navbar /> <Navbar />
<main id="app"> <main id="app">
<router-view /> <RouterView />
</main> </main>
</div> </div>
</template> </template>

View File

@ -16,7 +16,7 @@
class="inline-flex items-center mt-3 text-green-500" class="inline-flex items-center mt-3 text-green-500"
> >
Learn More Learn More
<mdi-arrow-right class="ml-1" /> <MdiArrowRight class="ml-1" />
</a> </a>
</div> </div>
</div> </div>

View File

@ -22,9 +22,9 @@
<ButtonPrimary> Vue docs </ButtonPrimary> <ButtonPrimary> Vue docs </ButtonPrimary>
</a> </a>
<router-link :to="{ name: 'About' }"> <RouterLink :to="{ name: 'About' }">
<ButtonSecondary> About </ButtonSecondary> <ButtonSecondary> About </ButtonSecondary>
</router-link> </RouterLink>
</div> </div>
</div> </div>
</section> </section>

View File

@ -3,7 +3,7 @@
<div <div
class="container flex flex-col flex-wrap items-center p-5 mx-auto md:flex-row" class="container flex flex-col flex-wrap items-center p-5 mx-auto md:flex-row"
> >
<router-link <RouterLink
:to="{ name: 'Home' }" :to="{ name: 'Home' }"
class="flex items-center mb-4 font-medium text-gray-900 title-font md:mb-0" class="flex items-center mb-4 font-medium text-gray-900 title-font md:mb-0"
> >
@ -11,11 +11,11 @@
<span class="ml-3 text-xl dark:text-white"> <span class="ml-3 text-xl dark:text-white">
{{ appName }} {{ appName }}
</span> </span>
</router-link> </RouterLink>
<nav <nav
class="flex flex-wrap items-center justify-center text-base md:ml-auto" class="flex flex-wrap items-center justify-center text-base md:ml-auto"
> >
<router-link <RouterLink
v-for="(route, index) in routes" v-for="(route, index) in routes"
:key="index" :key="index"
class="mr-5 font-semibold cursor-pointer" class="mr-5 font-semibold cursor-pointer"
@ -28,29 +28,28 @@
:to="{ name: route.name }" :to="{ name: route.name }"
> >
{{ route.name }} {{ route.name }}
</router-link> </RouterLink>
<router-link <RouterLink
class="flex items-center justify-center mr-2 text-black w-9 h-9 dark:text-white" class="flex items-center justify-center mr-2 text-black w-9 h-9 dark:text-white"
to="/aliens" to="/aliens"
> >
<mdi-alien /> <MdiAlien />
</router-link> </RouterLink>
<a <a
href="https://github.com/lstoeferle/vite-vue2-windicss-starter" href="https://github.com/lstoeferle/vite-vue2-windicss-starter"
target="_blank" target="_blank"
class="flex items-center justify-center mr-2 text-black w-9 h-9 dark:text-white" class="flex items-center justify-center mr-2 text-black w-9 h-9 dark:text-white"
> >
<mdi-github /> <MdiGithub />
</a> </a>
<button <button
@click="toggle" @click="toggle"
class="flex items-center justify-center w-9 h-9 focus:outline-none" class="flex items-center justify-center w-9 h-9 focus:outline-none"
> >
<mdi-white-balance-sunny class="text-yellow-500" v-if="isDark" /> <MdiWhiteBalanceSunny class="text-yellow-500" v-if="isDark" />
<mdi-moon-waning-crescent class="text-gray-800" v-else /> <MdiMoonWaningCrescent class="text-gray-800" v-else />
</button> </button>
</nav> </nav>
<div></div>
</div> </div>
</header> </header>
</template> </template>

View File

@ -16,9 +16,9 @@
Oops, looks like you got kidnapped by aliens. Oops, looks like you got kidnapped by aliens.
</p> </p>
<div class="flex justify-center"> <div class="flex justify-center">
<router-link :to="{ name: 'Home' }"> <RouterLink :to="{ name: 'Home' }">
<ButtonPrimary> Bring me back Home </ButtonPrimary> <ButtonPrimary> Bring me back Home </ButtonPrimary>
</router-link> </RouterLink>
</div> </div>
</div> </div>
</div> </div>