Kick off your project with this boilerplate. This starter ships with the main Nuxt 3 configuration files you might need to get up and running blazing fast with the blazing fast app generator for Vue paired with the CodyFrame CSS framework. Include CodyHouse components easily by following their directions on using components with Vue.
-
Clone this repo
$ git clone git@github.com:justerhan/nuxt3-starter-codyhouse.git
-
Start developing.
Navigate into your new siteβs directory and start it up.
cd nuxt3-codyhouse-starter/ yarn install && yarn dev
-
Open the source code and start editing!
Your site is now running at
http://localhost:3000
!Open the
nuxt3-codyhouse-starter
directory in your code editor of choice and editpages/index.vue
. Save your changes and the browser will update in real time!By default, the codyhouse 'confetti button' component is included as an example in
components/confetti-btn.vue
. You may want to delete this component and its corresponding SCSS file if you are not using it. -
Importing a new codyhouse component
- Make sure that
assets/css/codyhouse/main/_base.scss
has the correct path. - Place the component SCSS file into
assets/css/codyhouse/main/components/
folder. - Import the new SCSS file by adding a
@use
statement inassets/css/codyhouse/main/_components.scss
- Create a new vue component by adding a
.vue
file in./components
folder. - Copy and paste the component HTML into the
<template>
tag section from codyhouse component library - Copy and paste the component JS in the
<script>
tag section'smounted()
function from codyhouse component library - ...modify components as needed to make them dynamic
By default,
components/confetti-btn.vue
has been added for you as an example component. See comments in that file for more info. - Make sure that
A quick look at the top-level files and directories you'll see in this Nuxt3 project.
.
βββ node_modules/
βββ assets/
βββ css/codyhouse/main/
βββ components/
βββ _1_confetti-button.scss
βββ custom-style/
βββ _base.scss
βββ _components.scss
βββ _custom-style.scss
βββ main.scss
βββ style.scss
βββ components/
βββ confetti-btn.vue
.gitkeep
βββ layouts/
βββ default.vue
βββ pages/
βββ index.vue
βββ public/
βββ js/codyhouse/
βββ pe.js
βββ util.js
βββ .gitignore
βββ nuxt.config.ts
βββ app.vue
βββ tsconfig.json
βββ package.json
βββ yarn.lock
βββ LICENSE.md
βββ README.md
-
assets/
: The assets/ directory is used to add all the website assets that will be processed by the build tool (Webpack or Vite). This is where we put our codyhouse SCSS files for preprocessing. Ensure thatassets/css/codyhouse/main/_base.scss
has the correct import path. -
components/
: The components/ directory is where you put all your Vue components which can then be imported inside your pages or other components. This is where we put our codyhouse component HTML and JS into a vue component format. By default, an example confetti button component is included. -
layouts/
: Page layouts are placed in the layouts/ directory and will be automatically loaded via asynchronous import when used. If you create a layouts/default.vue this will be used for all pages in your app. Other layouts are used by setting a layout property as part of your component's options. -
pages/
: The pages/ directory is optional, meaning that if you only use app.vue , vue-router won't be included, reducing your application's bundle size. Here we put our index page containing an example codyhouse confetti button. -
public/
: The public/ directory is directly served at server root and contains public files that have to keep their names (e.g. robots.txt) or likely won't change (e.g. favicon.ico). Here we place codyhouse global scripts such aspe.js
for progressive enhancement and a globalutil.js
used by various codyhouse components. -
nuxt.config.ts
: The nuxt configuration file. For codyhouse, we added SCSS compiler options. -
package.json
: A manifest file for Node.js projects, which includes things like metadata (the projectβs name, author, etc). This manifest is how npm knows which packages to install for your project. For codyhouse, we addedcodyhouse
,postcss
,autoprefixer
andsass
required for codyhouse.
Looking for more guidance? Full documentation for Nuxt lives on the website.