Locomotive Nuxt Boilerplate

Locomotive Nuxt Boilerplate is built with Nuxt.js.

Usage

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

Styles

Styles are just CSS with some PostCSS plugins.

• Nesting
• Custom Media
• Px to Rem

There are some global styles in /assets/styles/.

• settings.css: Variables, custom medias, base fonts.
• generic.css: Resets.
• elements.css: Base elements.

But most styles are scoped in each component folder /components/.

Some components have an option prop, it applies a class to the component -option.

State

Some components use namespaced global events this.$root.$emit('ComponentName.eventName') or normal events this.$emit('eventName') listened on ref="eventName".

Global

Vuex is also used for the global app state this.$store.state.propName. The store is located in /store/.

Components

Some special components.

Layout

The grid. Set the width in percentage for different screen sizes with attributes named from the custom medias small, medium, large... Or alway keep the same width with width.

<Layout>
    <LayoutItem small="50" large="30"></LayoutItem>
    <LayoutItem width="50"></LayoutItem>
</Layout>

Link

Add a to attribute to use the Nuxt navigation and transitions or href for standard links.

<Link to="/page"></Link>
<Link href="#section"></Link>

Heading

Set both the HTML element for semantics and the size for the style.

<Heading el="h2" size="h3"></Heading>
<Heading el="p" size="h4"></Heading>

Sprite

SVGs are used for icons and logos. SVGs in /assets/sprite/svg/ are combined in a sprite and are used like this.

<svg-icon name="logo" />

🚂