official-website-template is a Nuxt.js boilerplate for rapidly building an SEO-ready official company website, providing a preconfigured Vue 2 project with SCSS, reusable UI components, and code-quality tooling.
What is official-website-template?
official-website-template is a GitHub-hosted Vue CLI template that scaffolds a Nuxt.js project structure (pages, layouts, store, plugins, static, assets) with a single index page and a set of ready-to-use components. It is initialized with the command vue init lq782655835/official-website-template my-project, then npm install && npm run dev starts the development server. The generated site includes a header and footer layout placeholder, a banner carousel, and common components such as button, input, modal, select, tabs, link, and icon. The template is licensed under MIT and is designed to be a starting point for official websites that need good SEO through Nuxt's server-side rendering.
Key Features
- Nuxt.js foundation — Built on Nuxt with
nuxt.config.js, layouts, pages, plugins, and store, giving server-side rendering and file-based routing out of the box. - SCSS styling with global resources — Includes
global.scss,reset.scss, andvariables.scssfor mixins and variables, automatically injected across the project via SCSS resource configuration. - Reusable light components — Ships with link, button, icon, input, modal, select, tabs, and layout components (header and footer) under
components/common, auto-registered by filename. - Banner carousel — Integrates the
vue-awesome-swiperplugin for hero/slider sections, mounted throughplugins/third.js. - Code standards enforced — Preconfigured with ESLint, Stylelint, and Prettier for code formatting, plus commitlint and Husky for commit message conventions.
- Axios + Vuex integrated — Provides a basic HTTP layer (
utils/http.js) and API module (utils/api.js) built on axios, and a store instore/index.jsfor state management. - Icon helper component — The
u-iconcomponent resolves images automatically fromassets/imgandassets/svgfolders, simplifying local asset usage.
Who is it for?
- Web developers who want a Nuxt starting point with a standard official-site layout, avoiding the need to wire up Vue Router, Vuex, and Axios manually.
- Agencies and freelancers who need to deliver corporate marketing sites quickly and prefer scoped, reusable components that match a typical header/footer/banner pattern.
- Vue teams adopting Nuxt who want a preconfigured linting and commit toolchain so they can concentrate on building pages and content rather than project setup.
What can you do with it?
- Launch a company website: Initialize the template, replace the banner and section components with your own content, and publish a server-side-rendered Nuxt site that is indexable by search engines.
- Build a landing page with lead capture: Combine the modal, input, and button components to create a sign-up or contact form without writing these UI elements from scratch.
- Prototype a marketing site structure: Use the header, footer, tabs, and select components to outline a multi-section page and then gradually replace the placeholder content.
How does it work?
You install Vue CLI 2 (npm install -g vue-cli), then run vue init lq782655835/official-website-template my-project to pull the template into a new folder. Once inside the project directory, npm install fetches dependencies and npm run dev launches the development server. The project uses Nuxt's conventional routing, so adding a file to pages automatically creates a route.
License
The code is distributed under the MIT license.
