⚡️ The Jamstack framework for Vue.js

Last update: Dec 30, 2022

Overview

Gridsome

Build super fast, modern websites with Vue.js

Gridsome is a Vue-powered static site generator for building CDN-ready websites for any headless CMS, local files or APIs

This project is under active development. Any feedback or contributions would be appreciated.

Enjoy a modern development stack

Build websites with modern tools like Vue.js, webpack and Node.js. Get hot-reloading and access to any packages from npm and write CSS in your favorite preprocessor like Sass or Less with auto-prefixing.

Connect to any CMS or data source

Use any CMS or data source for content. Pull data from WordPress, Contentful, local Markdown, or any other headless CMS or APIs and access it with GraphQL in your pages and components.

PWA Offline-first architecture

Only critical HTML, CSS, and JavaScript get loaded first. The next pages are then prefetched so users can click around incredibly fast without page reloads, even when offline.

Get perfect page speed scores

Gridsome automatically optimizes your frontend to load and perform blazing fast. You get code-splitting, image optimization, lazy-loading, and almost perfect lighthouse scores out-of-the-box.

Build future ready websites

The future of the web is JavaScript, API's, and Markup - the Jamstack. Gridsome uses the power of blazing-fast static site generator, JavaScript and APIs to create stunning dynamic web experiences.

Ready for global domination

Gridsome sites are usually not connected to any database and can be hosted entirely on a global CDN. It can handle thousands to millions of hits without breaking - and no expensive server costs.

Quick start

1. Install Gridsome CLI tool

npm install --global @gridsome/cli

2. Create a Gridsome project

gridsome create my-gridsome-site to create a new project
cd my-gridsome-site to open the folder
gridsome develop to start a local dev server at http://localhost:8080
Happy coding 🎉 🙌

3. Next steps

Create .vue components in the ./src/pages directory to create pages
Use gridsome build to generate static files in a ./dist folder

Learn more...

How to Contribute

Install Node.js 8.3 or higher and Yarn.

Clone this repository.
Create a new Gridsome project inside the ./projects folder.
Enter the new project folder and run yarn install.
The project will now use the local packages when you run gridsome develop.

Make sure your test project has a version number in its package.json if you use an existing project.

To use the local version of @gridsome/cli as the global command, enter the ./packages/cli folder and run npm link.

Yarn will add dependencies from your test projects to the root yarn.lock file. So you should not commit changes in that file unless you have added dependencies to any of the core packages. If you need to commit it, remove your projects from the ./projects folder temporary and run yarn install in the root folder. Yarn will then clean up the lock file with only necessary dependencies. Commit the file and move your projects back and run yarn install again to start developing.

Code of Conduct

In the interest of fostering an open and welcoming environment please read and follow our Code of Conduct.

License

Licensed under the MIT License.

Roadmap for v1.0

Visit the Gridsome Roadmap to keep track of which features we are currently working on.

Comments

Failed to execute 'appendChild' on 'Node'

Description

I'm getting a really weird issue, that only appears to be happening on Chrome on Android (v72.0.3626, can't confirm other versions).

Steps to reproduce

On a Android device (ideally hooked up via ADB + Chrome inspector):

go to https://2019.steveedson.co.uk
click on one of my articles
notice no console errors
refresh the page
Get the error:

Failed to execute 'appendChild' on 'Node': This node type does not support this method.

It will then break the rest of the JS execution, the router links and other Vue bindings no longer work. This is fine on desktop though.

"Error: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.appendChild (webpack:///./node_modules/vue/dist/vue.runtime.esm.js?:5161:8)
    at insert (webpack:///./node_modules/vue/dist/vue.runtime.esm.js?:5472:17)
    at createElm (webpack:///./node_modules/vue/dist/vue.runtime.esm.js?:5390:9)
    at createChildren (webpack:///./node_modules/vue/dist/vue.runtime.esm.js?:5481:9)
    at hydrate (webpack:///./node_modules/vue/dist/vue.runtime.esm.js?:5809:11)
    at hydrate (webpack:///./node_modules/vue/dist/vue.runtime.esm.js?:5824:34)
    at hydrate (webpack:///./node_modules/vue/dist/vue.runtime.esm.js?:5824:34)
    at hydrate (webpack:///./node_modules/vue/dist/vue.runtime.esm.js?:5824:34)
    at hydrate (webpack:///./node_modules/vue/dist/vue.runtime.esm.js?:5824:34)
    at VueComponent.patch [as __patch__] (webpack:///./node_modules/vue/dist/vue.runtime.esm.js?:5900:17)"

Expected result

No errors on mobile.

Environment


Libs:
- gridsome version: 0.5.4
- @gridsome/cli version: 0.0.7

Browser:
- [ ] Chrome (desktop) version XX
- [x] Chrome (Android) version v72.0.3626
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v8.12.0
- Platform:  Mac / Linux

question

opened by SteveEdson 48

error processing image on netlify

I use gridsome wordpress, but when i deploy on netlify i got error at processing image

how to fix this?

1:47:05 PM: Process files (0 files) - 0s 1:47:05 PM: 1:47:05 PM: Processing images (244 images) - 0% 1:47:11 PM: Processing images (244 images) - 10% 1:47:11 PM: Processing images (244 images) - 20% 1:47:11 PM: 1:47:11 PM: Processing images (244 images) - 30% 1:47:11 PM: Error: VipsJpeg: Premature end of JPEG file 1:47:11 PM: VipsJpeg: out of order read at line 32 1:47:11 PM: VipsJpeg: Premature end of JPEG file 1:47:11 PM: VipsJpeg: out of order read at line 32 1:47:11 PM: (sharp:3839): GLib-CRITICAL **: 06:47:11.726: g_hash_table_lookup: assertion 'hash_table != NULL' failed 1:47:11 PM: (sharp:3839): GLib-CRITICAL **: 06:47:11.727: g_hash_table_lookup: assertion 'hash_table != NULL' failed 1:47:11 PM: (sharp:3839): GLib-CRITICAL **: 06:47:11.727: g_hash_table_insert_internal: assertion 'hash_table != NULL' failed 1:47:11 PM: (sharp:3839): GLib-CRITICAL **: 06:47:11.727: g_hash_table_lookup: assertion 'hash_table != NULL' failed 1:47:11 PM: (sharp:3848): GLib-CRITICAL **: 06:47:11.743: g_hash_table_lookup: assertion 'hash_table != NULL' failed

opened by sofyanlabs 27
Cannot addEventListener (scroll)

Description

I am attempting to add eventlisteners for scrolling, something that I am familiar with in VueJS at least, but I cannot get it to work in Gridsome.

Steps to reproduce

I am using the below code in my Template. I have tried this code in a page component as well, and even created a custom App.vue to see if I had to put it there.

created () { window.addEventListener('scroll', this.handleScroll); }, destroyed () { window.removeEventListener('scroll', this.handleScroll); }, methods: { handleScroll (event) { console.log("Scrolling") } }

Expected result

Logging "Scrolling" when the user is scrolling.

Actual result

Nothing is being logged. If I register this.handleScroll() instead the method is being called once (obviously I guess, dont know if that says anything though).

Environment

System: OS: Linux 4.15 Ubuntu 18.04.4 LTS (Bionic Beaver) CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz Binaries: Node: 12.16.3 - /usr/bin/node Yarn: 1.22.4 - /usr/bin/yarn npm: 6.14.4 - /usr/local/bin/npm Browsers: Chrome: 81.0.4044.129 Firefox: 75.0 npmPackages: @gridsome/source-graphql: ^0.1.0 => 0.1.0 gridsome: ^0.7.0 => 0.7.13 gridsome-plugin-simple-analytics: ^1.1.0 => 1.1.0

opened by oskery 26
`gridsome build` hangs after Compile assets
Description

Upon creating a new, OOTB project and running gridsome build, it hangs after Compile assets and never creates any HTML files.

Steps to reproduce

Install the gridsome cli: sudo npm install --global @gridsome/cli

Create the project: gridsome create ttoo

cd ttoo

Build with gridsome build

Expected result

A /dist folder with HTML, JS and CSS etc.

Actual result

gridsome build Gridsome v0.5.7 Initialize - 0.45s Load sources - 0.03s Create GraphQL schema - 0.03s Set up routes - 0s Generate code - 0.02s Bootstrap finish - 0.54s Run GraphQL (0 queries) - 0s Compile assets - 3.15s

A /dist folder with:

/assets/css/*styles..css /assets/js/app|component|page*.js /assets/manifest/client|server.json

Environment

Libs: - gridsome version: 0.5.7 - @gridsome/cli version: 0.0.9 For Tooling issues: - Node version: 10.15.3 - Platform: Mac 10.14.4 Others: - Yarn version: 1.15.2
opened by stowball 26
Feat/strapi plugin
This adds support for the Strapi CMS.

Supports permissions (public and user specific single login), multiple entities, custom endpoint url, and query limit.

The only features I am aware of not currently implemented yet are:

Relations

JSON data type

Because it's still quite usable I think these features can be released at a later point.
opened by Truemedia 26
Plugin for Vue components in markdown
This plugin will make it possible to create pages with Markdown and Vue components. It can be used to replace src/pages completely or just for a section on your website.

Example usage for a documentation section

module.exports = { plugins: [ { use: '@gridsome/vue-remark', options: { typeName: 'Post', baseDir: './content/blog', pathPrefix: '/blog', template: './src/templates/Post.vue' } } ] }

Example .md file

--- title: A cool title --- import Message from '~/components/Message.md' import Button from '~/components/Button.vue' import labels from '~/data/labels.json' # {{ $frontmatter.title }} <Message>Lorem ipsum dolor sit amet...</Message> <Button @click="send">{{ labels.send }}</Button> <script> export default { methods: { send () { // ... } } } </script>

Options

It takes any options that the filesystem plugin supports plus the following:

layout

Type: string | object

Path to the Vue component that will be used as layout for all pages this plugin creates. The option can also be an object with component and props. Each page can also override this option in their front matter section.

layout: './src/layouts/Default.vue'

layout: { component: './src/layouts/Default.vue', props: { fullWidth: false } }

includePaths

Type: Array

Default: []

Paths or regex that should be parsed by this plugin. Use this option if you want to import md files as Vue components. Imported md components will not use the layout option above.
opened by hjvedvik 25

Error running 'gridsome develop' on fresh project; Error: stderr is null

Description

Tried to run develop on a newly created project. Fails after Bootstrap step.

Steps to reproduce

> gridsome create hello-gridsome
> cd hello-gridsome
> gridsome develop

Console output

Gridsome v0.5.4

Initialize - 0.18s
Load sources - 0.04s
Create GraphQL schema - 0.04sSet up routes - 0s
Generate code - 0.04s
Bootstrap finish - 0.31s
Error: stderr is null - this should never happen. Please open up an issue at https://github.com/facebook/jest
    at ChildProcessWorker.getStderr (/Users/williamjustice/workspace/gridsome-test/node_modules/jest-worker/build/workers/ChildProcessWorker.js:222:13)
    at new BaseWorkerPool (/Users/williamjustice/workspace/gridsome-test/node_modules/jest-worker/build/base/BaseWorkerPool.js:69:35)
    at new WorkerPool (/Users/williamjustice/workspace/gridsome-test/node_modules/jest-worker/build/WorkerPool.js:31:1)
    at new JestWorker (/Users/williamjustice/workspace/gridsome-test/node_modules/jest-worker/build/index.js:123:26)
    at createWorker (/Users/williamjustice/workspace/gridsome-test/node_modules/gridsome/lib/workers/index.js:9:10)
    at module.exports (/Users/williamjustice/workspace/gridsome-test/node_modules/gridsome/lib/server/middlewares/assets.js:8:18)
    at module.exports (/Users/williamjustice/workspace/gridsome-test/node_modules/gridsome/lib/server/createExpressServer.js:59:55)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Environment


- gridsome version: 0.5.4
- @gridsome/cli version: 0.0.8

- Node version: 10.13.0
- Platform: Mac

		                                  
		                                    bug



opened by wjustice  24












Prettier applied to page-query static-query




Hi, I'm a big fan of Gridsome.
Prettier has parser 'graphql'.
page-query and static-query is GraphQL syntax.
So I want to format code in page-query and static-query block.



opened by tyankatsu0105  22














Configuring PostCSS to work with TailwindCSS




Hi!
Awesome project - been playing with it for the last hour and super impressed! 👏
I am trying to use TailwindCSS with gridsome. I have tried the following approaches but neither are working (the CSS file doesn't run through PostCSS)

add a postcss key to package.json:

"postcss": {
    "plugins": {
      "tailwindcss": "./tailwind.js",
      "autoprefixer": {}
    }
  }


Add a .postcssrc.js or postcss.config.js file in root:

const tailwindcss = require('tailwindcss')

module.exports = {
  "plugins": [
    require('tailwindcss')('tailwind.js'),
    require('autoprefixer')(),
  ]
}

Neither are working.
Solution 1 is what works with vue-cli 3.
Is there a different way to achieve this? Is chainwebpack the way to do it?
Thanks in advance 🎉



opened by simonswiss  22














Cockpit CMS source




A first pass at a Cockpit source. To resolve:

[x] Readme file
[x] Fix repeater fields
[x] References

Repeater fields are currently the main issue. In Cockpit there is a 'repeater' field type which allows the admin to have a single repeating field which can be of any given types. So you could have a 'content section' field which allows an editor add one or multiple instances of the field in their content. When the editor adds an instance they can choose from a selection of different fields (selection configured by admin).
Using this source, at the moment if you have a repeater field made up of two (or more) different field types, only the first field type is added in Gridsome.
I haven't tested reference fields at all.



opened by tanc  21














Issue with routing




Description
When I run npm run dev, my site is fine and routing works correctly, however, on the generated SSR version, the routing doesn't work. Clicking a link updates the URL, however the page doesn't always load the new content.
Steps to reproduce
Not sure how to reproduce this just yet, but an example can be found at http://2019.steveedson.co.uk, clicking any link will update the URL, but won't affect the page content.
Expected result
The new page should load correctly.
Actual result
The URL updates, but not the page. Refreshing the page sometimes makes it work.



opened by SteveEdson  21














How to add canonical tag in Gridsome blog?




<template>
  <Layout>
    <section class="body-font">
      <div class="container mx-auto flex flex-wrap py-8">
        <div class="w-full md:w-2/3 flex flex-col">
          <div class="markdown-body pl-2 pr-2 md:pr-10">
            <h1 class="text-3xl font-bold mb-7">
              {{ $page.documentation.title }}
            </h1>
            <div class="markdown-body">
              <VueRemarkContent />
            </div>
          </div>
        </div>
        <aside
          class="
            w-full
            md:w-1/3
            flex flex-col
            pl-2
            pr-2
            md:pr-0 md:pl-6 md:border-l-1
            border-gray-300
            dark:border-gray-700
          "
        >
          <app-sidebar />
        </aside>
      </div>
    </section>
  </Layout>
</template>

<!-- Front-matter fields can be queried from GraphQL layer -->
<page-query>
query Documentation ($id: ID!) {
  documentation(id: $id) {
    path
    title
    excerpt
  }
}
</page-query>

<static-query>
query {
  metadata {
    siteTitle
    siteDescription
    siteAuthor
  }
}
</static-query>

<script>
export default {
  metaInfo() {
    return {
      title: this.$page.documentation.title,
      meta: [
        {
          key: 'description',
          name: 'description',
          content: this.$page.documentation.excerpt,
        },
        { name: 'description', content: this.$page.documentation.excerpt },
        { name: 'twitter:card', content: 'summary_large_image' },
        {
          name: 'twitter:description',
          content: this.$page.documentation.excerpt,
        },
        { name: 'twitter:title', content: this.$page.documentation.title },
        {
          name: 'twitter:site',
          content: `@${this.$static.metadata.siteAuthor}`,
        },
        {
          name: 'twitter:image',
          content: `${this.getBaseUrl}/default-thumb.png`,
        },
        {
          name: 'twitter:creator',
          content: `@${this.$static.metadata.siteAuthor}`,
        },
        { property: 'og:type', content: 'document' },
        { property: 'og:title', content: this.$page.documentation.title },
        {
          property: 'og:description',
          content: this.$page.documentation.excerpt,
        },
        {
          property: 'og:url',
          content: `${this.getBaseUrl}${this.$page.documentation.path}/`,
        },
        {
          property: 'og:image',
          content: `${this.getBaseUrl}/default-thumb.png`,
        },
        {
          property: 'og:image:secure_url',
          content: `${this.getBaseUrl}/default-thumb.png`,
        },
      ],
    }
  },

  components: {
    AppSidebar: () => import('~/components/parts/AppSidebar'),
  },
}
</script>

<style src="../css/github-markdown.css" />





opened by snowmanstudio  0














Check for undefined data in source-drupal




I am trying to create a field in Drupal that references a content type but the build fails with the error TypeError: Cannot read properties of undefined (reading 'type') at [Entity.createReference](https://entity.createreference/) (/app/front/node_modules/@gridsome/source-drupal/lib/Entity.js:150:47).
This seems to be happening because the processRelationships function in the source-drupal package checks whether data is null but doesn't check whether it's undefined. This causes the build to fail when data is undefined.



opened by sonianb  0














How to download images on build and serve from dist instead of remote airtable?




As airtable announced new changes, any attachment URLs obtained via the Airtable Web API and the CSV export functionality will expire after a few hours.
My question is how to serve images locally from build? In other words I would like to download them on build and place them in images folder



opened by babarogic  0














chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2




Bumps decode-uri-component from 0.2.0 to 0.2.2.

Release notes
Sourced from decode-uri-component's releases.

v0.2.2

Prevent overwriting previously decoded tokens 980e0bf

https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2
v0.2.1

Switch to GitHub workflows 76abc93
Fix issue where decode throws - fixes #6 746ca5d
Update license (#1) 486d7e2
Tidelift tasks a650457
Meta tweaks 66e1c28

https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1



Commits

a0eea46 0.2.2
980e0bf Prevent overwriting previously decoded tokens
3c8a373 0.2.1
76abc93 Switch to GitHub workflows
746ca5d Fix issue where decode throws - fixes #6
486d7e2 Update license (#1)
a650457 Tidelift tasks
66e1c28 Meta tweaks
See full diff in compare view





Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


Dependabot commands and options


You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
@dependabot use these labels will set the current labels as the default for future PRs for this repo and language
@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies 



opened by dependabot[bot]  0














chore(deps): bump loader-utils from 2.0.2 to 2.0.4




Bumps loader-utils from 2.0.2 to 2.0.4.

Release notes
Sourced from loader-utils's releases.

v2.0.4
2.0.4 (2022-11-11)
Bug Fixes

ReDoS problem (#225) (ac09944)

v2.0.3
2.0.3 (2022-10-20)
Bug Fixes

security: prototype pollution exploit (#217) (a93cf6f)




Changelog
Sourced from loader-utils's changelog.

2.0.4 (2022-11-11)
Bug Fixes

ReDoS problem (#225) (ac09944)

2.0.3 (2022-10-20)
Bug Fixes

security: prototype pollution exploit (#217) (a93cf6f)




Commits

6688b50 chore(release): 2.0.4
ac09944 fix: ReDoS problem (#225)
7162619 chore(release): 2.0.3
a93cf6f fix(security): prototype polution exploit (#217)
90c7c4b chore(release): 2.0.2
8c2d24e fix: base64 generation and unicode characters (#197)
See full diff in compare view





Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


Dependabot commands and options


You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
@dependabot use these labels will set the current labels as the default for future PRs for this repo and language
@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies 



opened by dependabot[bot]  0