Official Website Template

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, and variables.scss for 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-swiper plugin for hero/slider sections, mounted through plugins/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 in store/index.js for state management.
• Icon helper component — The u-icon component resolves images automatically from assets/img and assets/svg folders, 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.