NOTE : The Gridsome project seems to be dead. As a result, the repository has been archived. Consider Nuxt as an alternative, Nuxt 3 is a very good experience.

Typescript / Tailwind CSS Starter for Gridsome

This is a starter template for Gridsome using Typescript & Tailwind CSS. It uses eslint and typescript for static code analisys. In order to integrate these tools with Visual Studio Code, you'll need to install ESLint and Vetur extensions for the editor. Furthermore Tailwind CSS has been installed and to integrate this framework with VS Code, you'll need to install the TailwindCSS Intellisense extension.

1. Install Gridsome CLI tool if you don't have

yarn global add @gridsome/cli

2. Create a Gridsome project

1. gridsome create project-name https://github.com/Healios/gridsome-barebone.git to install this starter
2. cd project-name to open folder
3. gridsome develop to start local dev server at http://localhost:8080
4. Happy coding 🎉🙌

3. Static Code Analysis - Command Line

1. edit the .eslintrc.json file and add your favorites rules from eslint, typescript and vue.
2. run yarn lint:check to see static analysis result
3. run yarn lint:fix to fix errors found by eslint

4. Static Code Analysis - Visual Studio Code

As mentioned before, in order to lint your Typescript code in *.vue Single File Components with vscode you'll need to install ESLint and Vetur extensions for the editor.

Use the links above to install the extensions, or follow the steps below:

1. Open your vscode, type CTRL + SHIFT + X
2. Search for ESLint
3. Select and install the extension
4. Do same thing for Vetur extension

5. Tailwind CSS - Configuration

In order to extend or replace default Tailwind CSS values, edit the tailwind.config.js file.

6. Useful links

• Gridsome docs
• Typescript docs
• ESLint docs
• ESLint rules
• Typescript rules
• Vue rules
• ESLint extension for VSCode
• Vetur extension for VSCode
• Tailwind CSS extension for VSCode
• Tailwind CSS
• Vue I18n