Skip to content

Nuxt 3 layer with essential modules and components

Notifications You must be signed in to change notification settings

imlautaro/oxecore

Repository files navigation

Nuxt layer with essential modules and components to simplify a little bit the creation of new projects.

Setup

npm i -D oxecore # yarn add -D oxecore
// ~~/nuxt.config.ts
export default defineNuxtConfig({
	extends: ['oxecore'],
})

Modules Preset

  • UnoCSS*
  • Nuxt Icon*
  • VueUse

UnoCSS defaults

  • Preflight
  • Directives & Variant Group Transformers enabled
  • Typography enabled

Nuxt Icon defaults

  • Size set to 1.5em

Components

  • Stack
  • Container

Usage

Stack Component

This component is for creating flex elements by an intuitive way.

Example:

<template>
	<Stack gap="2" items="center" vertical>
		<span>Apple</span>
		<span>Banana</span>
		<span>Orange</span>
	</Stack>
	<!-- unocss equivalent -->
	<div class="flex flex-col space-y-2 items-center">
		<span>Apple</span>
		<span>Banana</span>
		<span>Orange</span>
	</div>
</template>

Props available are:

  • verticalboolean
  • componentstring
  • items'start' | 'end' | 'center' | 'baseline' | 'stretch’
  • justify'start' | 'end' | 'center' | 'between' | 'around' | 'evenly’
  • gapstring ('0' to '12')

Defaults are:

  • vertical: false
  • component: ‘div’
  • gap: ‘0’
ℹ️ Notice that the gap prop doesn’t actually use the `gap` css feature, it uses margins between elements to have full compatibility across all browsers.

Container Component

This component is for creating containers by an intuitive way.

Example:

<template>
	<Container class="py-12" max="lg">
		<h1>Hello world!</h1>
	</Container>
	<!-- unocss equivalent -->
	<div class="mx-auto px-4 w-full lg:max-w-screen-lg md:max-w-screen-md sm:max-w-screen-sm py-12">
		<h1>Hello world!</h1>
	</div>
</template>

Props available are:

  • max'sm' | 'md' | 'lg' | 'xl' | '2xl’
  • componentstring

Defaults are:

  • max: '2xl'
  • component: ‘div’

About

Nuxt 3 layer with essential modules and components

Topics

Resources

Stars

Watchers

Forks