gridsome / gridsome Goto Github PK

View Code? Open in Web Editor NEW

8.5K 124.0 490.0 8.39 MB

⚡️ The Jamstack framework for Vue.js

Home Page: https://gridsome.org

License: MIT License

JavaScript 97.19% HTML 0.28% Vue 2.47% CSS 0.05% Shell 0.01%

gridsome static-site-generator jamstack graphql vue nodejs

gridsome's Introduction

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
yarn global add @gridsome/cli
pnpm 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 ^12.13.0 || ^14.0.0 || >=16.0.0 or higher and Yarn classic.

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.

gridsome's People

Contributors

Stargazers

Watchers

Forkers

yysofiyan ahmadawais sanscheese ekoeryanto umphp karthik-cbe devhttps shaunstanislauslau ksharpdabu baonnguyen arnobferdous mouafa hhy5277 mizhashh isoppp seahken nguyenquangtin mittalyashu newbornfrontender amgarera jawache hjvedvik trendingtechnology valentinvieriu matt-e-king maoberlehner andrewhl 74jian yahsan2 shammishailaj shaal devportobello zmilan mohammadsabbagh gillon iseeyah truemedia longth9 falzar rachidsakara m3hari atfd tinychief-zz mottox2 jasverix lgs danvega hagata ameistad isnan909 tsukhu acidek davidcouronne truck-1 meuschke samdbeckham thien-hoang ajdruff ismaelandrade narration-sd mikemcbride anthonytdev jfzanato nkoehring nickstees edbailey angad777 dylan-wu raxisblur presleyhank oluwajubelo1 prometheusdigital shooontan vberlier eostrom dennis-simon al-rozhkov arjunchib pribeiro89 roborich technospino marceltn productinfo jfitzsimmons2 crystalhhc krmax44 2pees dulanhewage kodaininja sebastianwestberg netzzwerg suryatmodulus loren138 u12206050 todun jarred crsten baisheng neurosatan imansugirman

gridsome's Issues

Retina support for Gridsome Image

Summary

Would be nice to have retina support for g-image. Like for example if you set width="300" it will be lazy loaded as 600px for retina screen.

Basic example

Maybe something like:
<g-image width="300" retina="true" />

or just:
<g-image width="300" retina />

Adding Vuetify to main.js breaks build

Looks like I declared victory too early.

When trying to include Vuetify, I change main.js from this:

import DefaultLayout from '~/layouts/Default.vue'

export default function (Vue) {
  Vue.component('Layout', DefaultLayout)
}

To this:

import Vuetify from 'vuetify'
import DefaultLayout from '~/layouts/Default.vue'

import 'vuetify/dist/vuetify.min.css'

export default function (Vue) {
  Vue.use(Vuetify)
  Vue.component('Layout', DefaultLayout)
}

But right after that, if I build the default app with yarn build, it no longer works.
What's the right way to add Vuetify to Gridsome?

Cheers,
VA

P.S. This is part of a Gridsome tutorial I recently wrote at: https://lobotuerto.com/blog/quickstart-guide-for-a-new-gridsome-project/

Full path of local working directory in component--home.js

Description

Gridsome made a file: testproject/dist/assets/js/component--home.random.js.
That file contains string filePath: "/home/myname/projects/testproject/src/favicon.png".
I don't want deploy a file with full path of local working directory.

Steps to reproduce

I build Gridsome project at local working directory.

$ npx -p @gridsome/cli gridsome create testproject
$ cd ./testproject/
$ npm run build

Expected result

Relative path. just like ./src/favicon.png.

Support for Drupal

Hello gridsome maintainers and community,

I work for the the University of Arizona, College of Agriculture and we primarily develop within VueJS and Drupal. We recently created a PWA with a "headless" Drupal 8 instance as our backend. Drupal 8 exposes a lot more RESTful endpoints and with the help of a jsonapi Drupal module, we were able to standardize this even further.

Do you know if there is a roadmap for building out @gridsome/source-drupal (Drupal 8 support)? Or do you know any contributors in the community who might be starting this effort? If not, this is something we will be pursuing internally and would love to share our progress.

Thanks!

Image cache needs to be udpated when image source updates

Unable to use Vue Instance Properties since Gridsome 0.3.0

Description

Accessing Vue instance property $refs or $store in computed property of component lead to error in renderer with undefined value

Steps to reproduce

in src/layouts/default.vue use a computed property, eg

...,
computed: {
  userIsAuthenticated: function () {
    return this.$store.getters['user/user'] ...

For the $refs, you could add ref="test"in html and then in computed console.log(this.$refs.test)

Expected result

Computed property return value fro mstore

Actual result

[Vue warn]: Error in render: "TypeError: this.$store is undefined"

NB: was working on Gridsome <= 0.2.5

Windows path.sep Issue

Halo, we have issue with path.sep here where windows use \

let's take a look at generated html

<head>
    <title data-vue-tag="true">gridsome-site - gridsome-site</title>
    <meta data-vue-tag="true" charset="utf-8" />
    <meta data-vue-tag="true" name="generator" content="Gridsome v0.2.0" />
    <meta data-vue-tag="true" name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <link data-vue-tag="true" rel="icon" type="image/png" sizes="16x16" href="\assets\static\favicon-16.5e88a337b852fac611e60e8e2090302f.png" />
    <link data-vue-tag="true" rel="icon" type="image/png" sizes="32x32" href="\assets\static\favicon-32.5e88a337b852fac611e60e8e2090302f.png" />
    <link data-vue-tag="true" rel="icon" type="image/png" sizes="96x96" href="\assets\static\favicon-96.5e88a337b852fac611e60e8e2090302f.png" />
    <link data-vue-tag="true" rel="apple-touch-icon" sizes="76x76" href="\assets\static\favicon-76.5e88a337b852fac611e60e8e2090302f.png" />
    <link data-vue-tag="true" rel="apple-touch-icon" sizes="152x152" href="\assets\static\favicon-152.5e88a337b852fac611e60e8e2090302f.png" />
    <link data-vue-tag="true" rel="apple-touch-icon" sizes="120x120" href="\assets\static\favicon-120.5e88a337b852fac611e60e8e2090302f.png" />
    <link data-vue-tag="true" rel="apple-touch-icon" sizes="167x167" href="\assets\static\favicon-167.5e88a337b852fac611e60e8e2090302f.png" />
    <link data-vue-tag="true" rel="apple-touch-icon" sizes="180x180" href="\assets\static\favicon-180.5e88a337b852fac611e60e8e2090302f.png" />
    <link rel="preload" href="\/assets/css/styles.c752405f.css" as="style">
    <link rel="preload" href="\/assets/js/app.37708d01f3d62942a799.js" as="script">
    <link rel="preload" href="\/assets/js/component--home.4a827ca4b96e2f439c60.js" as="script">
    <link rel="preload" href="\/assets/css/styles.c752405f.css" as="style">
    <link rel="prefetch" href="\/assets/js/component--about.68225d5c3ef632b897b5.js">
    <link rel="prefetch" href="\/assets/js/page-query.817874f6f09aae25f44d.js">
    <link rel="stylesheet" href="\/assets/css/styles.c752405f.css">
</head>

Installation Issue

Great sounding project! I tried installing a site, but ran aground. I'm hopeful you can help debug or point out any silly error I'm making inadvertently.

I successfully installed the @gridsome/cli globally, as below. But then when creating a new site, the process failed and printed a simple 'undefined' in red. Not sure how to start debugging this, so I filed an issue.

Thanks for your attention.

MacBook-Pro:vue$ sudo npm install --global @gridsome/cli
/Users/xxxx/.nvm/versions/node/v9.6.0/bin/gridsome -> /Users/xxxx/.nvm/versions/node/v9.6.0/lib/node_modules/@gridsome/cli/bin/gridsome.js
+ @gridsome/[email protected]
added 55 packages in 2.637s

MacBook-Pro:vue$ gridsome create my-gridsome-site
❯ Clone https://github.com/gridsome/gridsome-starter-default.git 0.52s
❯ Update project package.json 0s
❯ Install dependencies
  • Building fresh packages (4 of 4)

undefined

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.

Source request: NetlifyCMS plugin

Hi,

I'd like to add a support to integrate netlifycms as a source for gridsome, but i'm facing some problem,
Following netlifycms doc : Add to your site

How can i inject with plugin a new page (from router) with required basic html and on other page add the Netlify Identity Widget ?

So we need to populate a new folder eg: 'admin/' with

index.html
config.yml

Example of GatsbyJS : Gatsbyjs plugin netlifycms

Loading a global scss file

Hello all,

i try to load a global scss file using the sass-resources-loader package.
I install this package and add a chainWebpack parameter to the config file:
chainWebpack: config => { config.module .rule('scss') .test(/\.scss$/) .use('sass-loader') .loader('sass-resources-loader') .options({ resources: './scss/style.scss' }); },

It doesn't work and i don't really know if it's the best practice to add global scss vars to each components of my project so, any recommandation is welcome.

Thank you for your help !

Jest snapshot + Gridsome static-query page-query

Summary

Question.
I want to use Jest snapshot in file use page-query, static-query.
But, an error message is displayed in the Terminal.

[Vue warn]: Error in config.errorHandler: "TypeError: Cannot read property 'allWordPressPost' of undefined"

// spec.js
import { shallowMount } from "@vue/test-utils";
import All from "@/pages/blog/All.vue";

describe("All", () => {
  it("render", () => {
    const wrapper = shallowMount(All);
    console.log(wrapper);

    expect(wrapper.html()).toMatchSnapshot();
  });
});

// .vue
<template>
	<Layout>
		<div class="All">
			<article>
				<g-image
					src="http://placehold.jp/400x200.png"
					width="500"
				/>
			</article>
			<ul>
				<li
					v-for="edge in $page.allWordPressPost.edges"
					:key="edge.node._id"
				>
					{{ edge.node.title }}
					
					<g-link :to="edge.node.path">
						Read more
					</g-link>
				</li>
			</ul>
			<Pager :info="$page.allWordPressPost.pageInfo" />
		</div>
	</Layout>
</template>

<script>
import { Pager } from "gridsome";

export default {
  components: {
    Pager
  }
};
</script>


<page-query>
query Blog($page: Int) {
  allWordPressPost(perPage: 10, page: $page) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        id
        title
        path
        slug
        path
        date(format: "YYYY-MM-DD", locale: "ja")
      }
    }
  }
}
</page-query>


<style scoped lang='scss'>
.All {
}
</style>

Basic example

Example Gatsby
https://www.gatsbyjs.org/docs/testing-components-with-graphql/

Motivation

I think render test is necessary.

Contentful api connection doesn't work

Hello all,

it tried the Contentful plugin but it doesn't seems to work.

I set a contentful space and add the parameters (space & accesstoken) to the gridsome config file.
When i write "gridsome develop" in my console, here's the errors that occur:

TypeError: api.loadSource is not a function
at new ContentfulSource (/Applications/gridsome/techyourchance/node_modules/@gridsome/source-contentful/index.js:17:9)
at Plugins.plugins.app.config.plugins.map.entry (/Applications/gridsome/techyourchance/node_modules/gridsome/lib/app/PluginsRunner.js:32:24)
at Array.map ()
at new Plugins (/Applications/gridsome/techyourchance/node_modules/gridsome/lib/app/PluginsRunner.js:14:39)
at App.init (/Applications/gridsome/techyourchance/node_modules/gridsome/lib/app/App.js:62:20)
at App.bootstrap (/Applications/gridsome/techyourchance/node_modules/gridsome/lib/app/App.js:42:23)
at module.exports (/Applications/gridsome/techyourchance/node_modules/gridsome/lib/app/index.js:11:13)
at module.exports (/Applications/gridsome/techyourchance/node_modules/gridsome/lib/develop.js:14:21)
at args (/Applications/gridsome/techyourchance/node_modules/gridsome/index.js:41:12)
at Command.program.command.description.option.option.action.args (/Applications/gridsome/techyourchance/node_modules/gridsome/index.js:8:44)
at Command.listener (/usr/local/lib/node_modules/@gridsome/cli/node_modules/commander/index.js:315:8)
at Command.emit (events.js:182:13)
at Command.parseArgs (/usr/local/lib/node_modules/@gridsome/cli/node_modules/commander/index.js:654:12)
at Command.parse (/usr/local/lib/node_modules/@gridsome/cli/node_modules/commander/index.js:474:21)
at Object. (/usr/local/lib/node_modules/@gridsome/cli/bin/gridsome.js:48:9)
at Module._compile (internal/modules/cjs/loader.js:678:30)

**
Thank you for your help.

Feature request: Build static files

Every time I build static files with gridsome it compiles assets. I wonder if It's possible to rebuild static files only from GraphQL schema on production (when using webhooks to update data) and not compile assets over and over? It would reduce build time drastically.

Automatic favicon + app icon generation

Possible solution:

favicon.png placed inside project folder (or src folder) will automatically be added to head meta and resized to proper sizes.

Live reload doesn't work on @import scss files from other scss files

Description

When using a main scss file to @import other scss files, live reload only works when saving the parent file.

Steps to reproduce

Create "main.scss"
Create "_other.scss"
@import "_other.scss" in "main.scss"
Run "gridsome develop"
Change code in "_other.scss"
Live reload doesn't notice the change and trigger

Expected result

Live reload should be triggered by changing and saving "_other.scss"

Actual result

Live reload isn't triggered unless parent scss file "main.scss" is saved

More Markdown extensions

Could we add more markdown extensions to the remark transformer plugin?

VuePress has some nice ones:
https://vuepress.vuejs.org/guide/markdown.html

Thinking about these two:

Table of contents [[toc]]
Custom containers ::: tip ::: etc.

TypeError: Cannot read property 'contentType' of undefined

I think the issue is because the for loop for (const contentType of contentTypes) is setting both the types and the nodes in the same loop.

Question: How to debug $path or other variables that can be passed to GraphQL?

How to pass variables to GraphQL layer, and how to debug them?

Strange error every now and then after adding a new dependency

Hello, I've come across this multiple times, it usually happens after I install a new dependency then try to run the development server:

$ yarn serve
yarn run v1.12.3
warning ../../package.json: No license field
$ gridsome develop
internal/modules/cjs/loader.js:736
  return process.dlopen(module, path.toNamespacedPath(filename));
                 ^

Error: libvips-cpp.so.42: cannot open shared object file: No such file or directory
    at Object.Module._extensions..node (internal/modules/cjs/loader.js:736:18)
    at Module.load (internal/modules/cjs/loader.js:605:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
    at Function.Module._load (internal/modules/cjs/loader.js:536:3)
    at Module.require (internal/modules/cjs/loader.js:643:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/home/yomero/tmp/my-site/node_modules/sharp/lib/constructor.js:10:15)
    at Module._compile (internal/modules/cjs/loader.js:707:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
    at Module.load (internal/modules/cjs/loader.js:605:32)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

It'll keep erroring out until I rm -rf node_modules then do a yarn install.
Any ideas on what's going on?

Cheers,
VA

Question: How to load static assets?

First of all, awesome project!

So I'm trying to load a config.yml file but can't seem to get it to work.

I've tried a static dir in the root and in /src and then tried different path options like ~/config.yml, @/config.yml and relative paths too and I can't seem to load the file.

Hopefully, this is a simple thing that I'm missing.

Thanks!

Changing UI Layer

How closely integrated is the view layer (Vue) with the backend? I'd like to use this project but I would rather use Svelte as the view layer. It's very similar to Vue, so I would imagine that it would be relatively trivial to swap it, if the integration allows.

builded static files has no styling

hello, static files generated with command gridsome build has no styling.

In console i'm getting warnings:
Loading failed for the <script> with source “file:///assets/js/component--home.fe581950910f6e650f25.js”.
and
Loading failed for the <script> with source “file:///assets/js/app.6126d53262e87d386d77.js”.

Transition not working

Hi, in the Default.vue layout, if you wrap a slot in a transition, nothing happens. It just doesn't work. What am I doing wrong?

User authentication, form submission and GraphQL subscriptions

Nice project! Are there any plans for supporting user authentication, form submissions or real-time updates via GraphQL subscriptions?

Frontmatter

I am trying to create a blog with markdown files as a post. And I didn't find a way how to use the custom info in frontmatter (like author, summary or cover for cover image). In Gatsby, we have access to frontmatter info and can use it in the template. What about gridsome?

Can someone show me the way to connect data?

I have everything working, even added some pages. All good.
I have tried all afternoon to get data to pass to the pages. eventually, I would like to parse outside json urls for list. But, for now I would be happy just getting a list to print out. I need to be able to make a list of this. A Tittle and image and a url.

GraphQL query filter not working

I am trying to filter a list of blog posts by author and tag, but GraphQL is throwing error Unknown argument \"filter\" on field \"allGhostBlogPost\" of type \"Query\".". I am current running gridsome version 0.3.4.

query AuthorIndex ($slug: String!) {
  allGhostBlogPost (filter: {primaryAuthor: {slug: {eq: $slug}}}) {
    edges {
      node {
        id
        title
        path
        content
        excerpt
        date
        primaryTag {
          url
          name
          slug
        }
        primaryAuthor{
          name
          url
          slug
          profile_image
        }
      }
    }
  }
}

I understand that filter argument is not included in default schema. So I assume I can add it in some way.

Here are a few references from Stackoverflow,

404 page not generated

Description

Following the documentation about creating 404 page
https://deploy-preview-28--gridsome-org-live.netlify.com/docs/view-structure#404

When adding 404.vue in src/pages, build do not generate the 404 page

Steps to reproduce

Create new project
$ gridsome create test

add in src/pages folder 404.vue file

<template>
  <Layout>
    <h1>404</h1>
    <p>Error.</p>
  </Layout>
</template>

<script>
export default {}
</script>

$ gridsome build

Expected result

404.html in dist folder

Actual result

Nothing

NB: i can see the 404 only on dev mode: gridsome develop

Feature request: i18n

Add support for Vue components in Markdown files

Hello,

I have this use case:
I'd like to be able to use Vue components inside Markdown files.

Example (this is not currently working):

src/components/Hello.vue

<template lang="pug">
p Hello component!
</template>

src/templates/Post.vue

<template lang="pug">
layout
  div(v-html="$page.post.content")
</template>

<page-query>
query Post ($path: String!) {
  post: post (path: $path) {
    title
    content
  }
}
</page-query>

<script>
import Hello from '@/components/Hello.vue'

export default {
  components: { Hello },
  metaInfo () {
    return {
      title: this.$page.post.title
    }
  }
}
</script>

blog/first-post.md

---
slug: first-post
title: This is my first post!
---

# This is some first level title

* Bullet point #12
* Bullet point #2
* Bullet point #3

## This is a second level title

> This is a blockquote

<Hello />

gridsome.config.js

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'blog/**/*.md',
        typeName: 'Post',
        route: '/blog/:slug'
      }
    }
  ]
}

Hello component! is not being rendering on /blog/first-post.

Is this possible? or easily achievable?
I think this feature could be a very powerful addition.

Cheers,
VA

Add support for local plugins

I'm working on a source plugin and it took a little while to get it working. Ultimately I couldn't get require.resolve to resolve my plugin in a local plugins folder. In the end, I had to set my plugins use parameter to ../../../../src/plugins/source-umbraco to work.

Would be good if there was a nice way to be able to include local plugins as well as ones installed via NPM

GraphQL SortOrder enum maybe not working properly

Hi!
I'm having some issues with using the "order" parameter for querying a local Markdown source. Whenever I try to use it with the DESC or ASC enum I get the following error: Variable \"$_v1_order\" got invalid value -1; Expected type SortOrder.

Have I done something wrong? Is this a known issue or should I investigate it further on my side and try to reproduce it in a minimal project?

Dependency not found error can be misleading

Description

If you're referencing own, internal dependencies (not node_modules) that do not exist, Gridsome answers with:

This dependency was not found:

* ~/layouts/Default.vue in ./src/main.js

To install it, you can run: npm install --save ~/layouts/Default.vue

I'm not sure if this comes from Webpack or Gridsome. But I work quite some years with Webpack and never got the suggestion to install something via npm the way Gridsome does.

Steps to reproduce

Import a file or asset that doesn't exist.

Expected result

Error about missing dependency, but no note about installing dependencies when using Webpack's tilde to reference.

Actual result

Tells me to install dependencies via npm which would not work of course.

Duplicate meta properties

Description

Duplicate meta properties.

Steps to reproduce

As we know Gridsome uses vue-meta to manage meta information. To prevent duplicate properties, we should add vmid key as described here.

I have real world example for this, you can check it here. For source code related this issue, available in here

Expected result

It should not return duplicate meta tag with same vmid, for example in this case is

<meta name='description'>

Actual result

Returning duplicate tag.

<meta data-vue-tag="true" vmid="description" name="description" content="enjoy our thoughts, experiments, and case studies in web technologies"/>

<meta data-vue-tag="true" vmid="description" name="description" content="We are just getting started!"/>

Notes

I don't know is this vue-meta related issues or gridsome. But I don't have any issues related this
since I'm using vue-meta in SSR. Thanks!

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 🎉

Some plugin

Hello i want to know if you some example of plugin because i want to help with others plugins.

Russian version of gridsome.org

The website gridsome.org is often not available from Russia. It seems the IP you are using is banned because of Telegram restrictions. Could you please host ru.gridsome.org version of the website on some Russian server like cloud.yandex.ru for like $5 a month? I am ready to help you translate it into Russian like ru.vuejs.org

Hot-reload image source when changing attributes

When you change an attribute on now like width the image is not updated. You need to refresh the page for it to be updated.

The best would be if this was hot-reloaded.

Image handling

I'm wondering what the current and future concepts around image handling are? For example, if I have image tags in the content from a remote API, how would I fetch and use them within gridsome?

Pug support

Hello guys,

I tried to add support for Pug templates by doing:

yarn add pug pug-plain-loader --dev

Then changed an HTML template from:

<template>
  <Layout>
    <h1>About us</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error doloremque omnis animi, eligendi magni a voluptatum, vitae, consequuntur rerum illum odit fugit assumenda rem dolores inventore iste reprehenderit maxime! Iusto.</p>
  </Layout>
</template>

<script>
export default {}
</script>

To:

<template lang="pug">
layout
  h1 About us
  p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error doloremque omnis animi, eligendi magni a voluptatum, vitae, consequuntur rerum illum odit fugit assumenda rem dolores inventore iste reprehenderit maxime! Iusto.
</template>

<script>
export default {}
</script>

And I'm seeing this error:

 error  in ./src/pages/About.vue?vue&type=template&id=2c11fd19&lang=pug&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 
  Error compiling template:
  
  layout
    h1 About us
    p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error doloremque omnis animi, eligendi magni a voluptatum, vitae, consequuntur rerum illum odit fugit assumenda rem dolores inventore iste reprehenderit maxime! Iusto.
  
  - Component template requires a root element, rather than just text.


 @ ./src/pages/About.vue?vue&type=template&id=2c11fd19&lang=pug& 1:0-408 1:0-408
 @ ./src/pages/About.vue
 @ ./src/.temp/routes.js
 @ ./node_modules/gridsome/app/router.js
 @ ./node_modules/gridsome/app/app.js
 @ ./node_modules/gridsome/app/entry.client.js
 @ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true ./node_modules/gridsome/app/entry.client.js

Is there an easy way to accomplish this?

Cheers,
VA

Use within Docker containers

I'm experimenting with running Gridsome within a set of docker containers. The first issue is the localhost is the default host which stops the browser from connecting with the server within the containers. This is resolvable by specifying 0.0.0.0 as the host using gridsome develop -h 0.0.0.0

The next problem is the served application can't connect with the GraphQL server, the browser throws the following:

fetch.js?1477:12 OPTIONS http://0.0.0.0:8080/___graphql net::ERR_CONNECTION_REFUSED

If I specify an actual hostname (which resolves to the IP of the docker container) then I get errors running the server with gridsome develop -h gridsome.lndo.site:

Gridsome v0.3.4

Initialize - 0.06s
Load sources - 0.1s
Create GraphQL schema - 0.04s
Generate code - 0.02s
Bootstrap finish - 0.23s
events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRNOTAVAIL 172.24.0.4:9000
    at Server.setupListenHandle [as _listen2] (net.js:1343:19)
    at listenInCluster (net.js:1401:12)
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1510:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:72:10)

Any ideas how to proceed?

Loading external JS

Hello, I am trying to migrate my Ghost theme to Gridsome and it has some theme specific JS file which I would like to include. I assume one has to use webpack loader but not sure how. Any hints will be much appreciated.

TypeError: Cannot read property 'addReference' of undefined

I'm using Gridsome ^0.3.0, and @gridsome/source-wordpress, ^0.1.0, and I'm running into the following error upon running gridsome develop:

TypeError: Cannot read property 'addReference' of undefined
    at WordPressSource.fetchWordPressContent (/Users/andrew/code/SpiralPraxis/marketing/node_modules/@gridsome/source-wordpress/index.js:99:20)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

I've got a vanilla installation. I haven't modified any files except gridsome.config.js, and that only to provide a URL to my wordpress site, which is enabled to serve wp-json endpoints.

Here's my config file:

module.exports = {
  plugins: [{
    use: '@gridsome/source-wordpress',
    options: {
      baseUrl: 'https://mywordpresssite.com', // required
      typeName: 'WordPress', // GraphQL schema name (Optional)
      perPage: 100, // How many posts to load from server per request (Optional)
      concurrent: 10, // How many requests to run simultaneously (Optional)
      routes: {
        post: '/:year/:month/:day/:slug', //adds route for "post" post type (Optional)
        post_tag: '/tag/:slug' // adds route for "post_tag" post type (Optional)
      }
    }
  }]
}

Here's the relevant code from @gridsome/source-wordpress/index.js:

    for (const type in taxonomies) {
      const options = taxonomies[type]
      const typeName = makeTypeName(type)
      const route = routes[type] || `/${options.rest_base}/:slug`

      restBases.taxonomies[type] = options.rest_base

      for (const type of options.types) {
        const postTypeName = makeTypeName(type)
        const collection = getContentType(postTypeName)

        collection.addReference(options.rest_base, { typeName, key: '_id' })
      }

      addContentType({ typeName, route })
    }

Not sure what to do. I can't see anything in the documentation that clarifies this issue. Help would be appreciated.

Source request: Airtable plugin

Airtable is great for managing sites but Gridsome lacks the support of it for now.

I guess it can be almost the same as the same plugin for Gatsby from https://github.com/jbolda/gatsby-source-airtable

I am going to build this plugin myself. If anybody is doing this already please let us know here. Thanks.

Error in gridsome develop

SyntaxError: Invalid regular expression: /^\assets\static\(.*)\/?$/: Unmatched ')'
    at new RegExp (<anonymous>)
    at pathtoRegexp (O:\Repository\gridsome-site\node_modules\express\node_modules\path-to-regexp\index.js:128:10)
    at new Layer (O:\Repository\gridsome-site\node_modules\express\lib\router\layer.js:45:17)
    at Function.route (O:\Repository\gridsome-site\node_modules\express\lib\router\index.js:494:15)
    at Function.app.(anonymous function) [as get] (O:\Repository\gridsome-site\node_modules\express\lib\application.js:481:30)
    at module.exports (O:\Repository\gridsome-site\node_modules\gridsome\lib\server\createExpressServer.js:25:10)
    at process._tickCallback (internal/process/next_tick.js:68:7)

I believe that this error only happen on windows system, but I'll try to investigate it more.

`:filename` param for the dynamic route

Add :filename param for the dynamic routing.

gridsome / gridsome Goto Github PK

gridsome's Introduction

Gridsome

Build super fast, modern websites with Vue.js

Enjoy a modern development stack

Connect to any CMS or data source

PWA Offline-first architecture

Get perfect page speed scores

Build future ready websites

Ready for global domination

Quick start

1. Install Gridsome CLI tool

2. Create a Gridsome project

3. Next steps

Learn more

How to Contribute

Code of Conduct

License

Roadmap for v1.0

gridsome's People

Contributors

Stargazers

Watchers

Forkers

gridsome's Issues

Summary

Basic example

Description

Steps to reproduce

Expected result

Description

Steps to reproduce

Expected result

Actual result

Summary

Basic example

Motivation

Description

Steps to reproduce

Expected result

Actual result

Description

Steps to reproduce

Expected result

Actual result

Description

Steps to reproduce

Expected result

Actual result

Description

Steps to reproduce

Expected result

Actual result

Notes

Reference

Recommend Projects

Recommend Topics

Recommend Org