sidebase / sidebase Goto Github PK

sidebase is the productive way to build fullstack Nuxt 3 applications: sidebase is a web app development kit to build production ready fullstack apps quickly. We build sidebase to provide a modular, modern, fully-typed and best-practice approach to make your ideas a reality.

Home Page: https://sidebase.io/

License: MIT License

Dockerfile 5.95% Vue 0.50% TypeScript 93.33% Shell 0.22%

fullstack nuxt nuxt3 typescript vue vuejs

sidebase's Introduction

sidebase

sidebase is a web development kit to build production ready fullstack Nuxt 3 apps quickly. sidebase relies on modern, fully-typed and best-practice technology to achieve this goal. sidebase embraces the fullstack TypeScript approach to app development: Code sharing between client and server, reduced learning curve for engineers and code-reuse across apps are things we love about this approach. That said, you can also use sidebase to build client-side only apps.

Visit sidebase.io/sidebase for quick-start, docs, guides and more!

To get started, run:

npm create sidebase@latest

And you are ready to go! The sidebase CLI will guide you through the process. Afterwards, or if you still want to know more, read the documentation to continue.

Features

With sidebase you can build production ready, robust, maintainable, fullstack applications:

🎒 Fullstack: Develop frontend and backend in a single TypeScript code base
🏎️ Fast to code: Database, example tests, example components and example pages are all there for you to fill out
🐛 Fewer bugs: Strong data-validation using Prisma to validate all data coming into the database at runtime
😊 Easy to use: Designed to follow best practices and to be ready-to-go for development, without additional dev-dependencies like docker that make it hard to get started
🚀 Ready for launch: Github Actions CI, Dockerfile, easy switch to most popular SQL-databases are all there, out of the box (get in touch if you're missing something)

To facilitate this sidebase bootstraps a nuxt 3 project that permits developing a backend and a frontend using just Nuxt 3 with overarching TypeScript support. We want to show the world how enjoyable end-to-end typescript programming can be, displacing the myth that JS/TS-backends are no good. This starter solves a lot of the "real-world" problems that occur after you start using Nuxt or any other framework: How to write backend tests? How to write component tests? How to calculate test coverage? How to integrate a database? How to build a docker image? ...?

If you have any problems with this project (e.g., setting it up on your PC) open an issue and we'll figure it out together with you 🎉

License

MIT

sidebase's People

Contributors

Stargazers

Watchers

sidebase's Issues

New library ideas for sidebase

This is a thread in which developers can post their wishes for new libraries we can develop to enhance the experience of working with Nuxt3 and sidebase!

Add Nuxt Types Router

Describe the feature

Add a package, that adds typescript support for routes.
https://github.com/victorgarciaesgi/nuxt-typed-router

Demo:

Additional information

No response

Build preset 'netlify-edge' throws error when used together with @sidebase/nuxt-auth

Environment

------------------------------
- Operating System: Darwin
- Node Version:     v18.14.0
- Nuxt Version:     3.5.1
- Nitro Version:    2.4.1
- Package Manager:  [email protected]
- Builder:          vite
- User Config:      modules, typescript, nitro
- Runtime Modules:  @sidebase/[email protected]
- Build Modules:    -
------------------------------

Reproduction

https://github.com/wireless25/sidebase-netlify-edge-reproduction

Describe the bug

When 'netlify-edge' is selected as the build preset and the @sidebase/nuxt-auth module is active, the build fails. I also tried the Sidebase starter without the auth module, and the build completed fine.

Additional context

checkout reproduction repo
install deps pnpm i
pnpm build

Logs

[10:28:03 PM]  ERROR  "createHash" is not exported by "node_modules/.pnpm/[email protected]/node_modules/unenv/runtime/node/crypto/index.mjs", imported by "node_modules/.pnpm/[email protected]/node_modules/jose/dist/node/esm/runtime/digest.js".

  at error (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:2124:30)
  at Module.error (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:13463:16)
  at Module.traceVariable (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:13884:29)
  at ModuleScope.findVariable (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:12429:39)
  at ReturnValueScope.findVariable (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:6965:38)
  at Identifier.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:8127:40)
  at CallExpression.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5738:23)
  at CallExpression.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:9680:15)
  at MemberExpression.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5738:23)
  at MemberExpression.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:9344:19)
  at CallExpression.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5738:23)
  at CallExpression.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:9680:15)
  at MemberExpression.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5738:23)
  at MemberExpression.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:9344:19)
  at CallExpression.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5738:23)
  at CallExpression.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:9680:15)
  at ArrowFunctionExpression.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5738:23)
  at VariableDeclarator.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5738:23)
  at VariableDeclaration.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5734:28)
  at Program.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:5734:28)
  at Module.bindReferences (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:13459:18)
  at Graph.sortModules (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:24965:20)
  at Graph.build (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:24849:14)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:25875:13
  at async catchUnfinishedHookActions (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:25022:16)
  at async rollupInternal (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:25870:5)
  at async _build (node_modules/.pnpm/[email protected]/node_modules/nitropack/dist/shared/nitro.a3c42e5a.mjs:2246:20)
  at async node_modules/.pnpm/[email protected]_rpjxlqcfh7pz5woobnsyir5gdu/node_modules/nuxt/dist/index.mjs:2492:9
  at async build (node_modules/.pnpm/[email protected]_rpjxlqcfh7pz5woobnsyir5gdu/node_modules/nuxt/dist/index.mjs:3394:5)
  at async Object.invoke (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/chunks/build.mjs:56:5)
  at async _main (node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/cli.mjs:48:20)

 ELIFECYCLE  Command failed with exit code 1.

Add TailwindCSS linting rules

Describe the feature

There are several eslint extensions to enforce correct usage of TailwindCSS classes. I believe while very opinionated, these linters can add value and consistency to projects.

The office TailwindCSS Prettier package is this one:
https://www.npmjs.com/package/prettier-plugin-tailwindcss

This package sorts class names after TailwindCSS's offical class sorting guidelines: https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted

Another interesting package is this community maintained one:
https://www.npmjs.com/package/eslint-plugin-tailwindcss

Along with class sorting this package also adds:

enforces shorthands (mx-4 my-4 gets turned into m-4)
disallows contradicting class names (mx-3 mx-4 on one element throws an error)

I feel like a mixture of both of these could be very helpful!

Additional information

No response

Adding HeadlessUI

Describe the feature

HeadlessUI is a unstyled utility library made by the creators of TailwindCSS.
It extends TailwindCSS to allow one to add more complex animations and components. I believe that in some instances it is super helpful, as it allows you to create completely customised drop-downs, lists and modals.

Link: https://headlessui.com/

Additional information

No response

Look into Dockerfile issues

Describe the feature

Sometimes the default-docker build does not seem to work out: The app starts but no DB connection to the sqlite DB can be established.

To replicate:

docker build -t nuxt3-app .
docker run -p 3000:3000 --init --rm nuxt3-app

Additional information

No response

Example/ShowCase story giving out an error

Environment

Operating System: Darwin
Node Version: v16.14.2
Nuxt Version: 3.0.0-rc.9
Nitro Version: 0.5.1
Package Manager: [email protected]
Builder: vite
User Config: -
Runtime Modules: -
Build Modules: -

Reproduction

No response

Describe the bug

Show case story gives errors and doesn't show up on my mac.

When I ran npm run story after cloning the project locally, it gave console errors to me and the ShowCase example stories do not show up on historie.

Additional context

I cloned the project to a new branch in an already existing project.

Logs

Error while collecting story /Users/daeunyoon/Sidestream/is-this-an-mlm/app/components/example/ShowCase.story.vue:
TypeError [ERR_PACKAGE_IMPORT_NOT_DEFINED]: Package import specifier "#build/app.config.mjs" is not defined in package /Users/daeunyoon/Sidestream/is-this-an-mlm/app/node_modules/nuxt/package.json imported from /Users/daeunyoon/Sidestream/is-this-an-mlm/app/node_modules/nuxt/dist/app/config.mjs
    at new NodeError (node:internal/errors:371:5)
    at throwImportNotDefined (node:internal/modules/esm/resolve:429:9)
    at packageImportsResolve (node:internal/modules/esm/resolve:778:3)
    at moduleResolve (node:internal/modules/esm/resolve:924:21)
    at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:1044:11)
    at Loader.resolve (node:internal/modules/esm/loader:89:40)
    at Loader.getModuleJob (node:internal/modules/esm/loader:242:28)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36)

Issue saving a typeorm entity

Environment

Operating System: Windows_NT
Node Version: v16.14.2
Nuxt Version: 3.0.0-rc.10
Nitro Version: 0.5.3
Package Manager: [email protected]
Builder: vite
User Config: -
Runtime Modules: -
Build Modules: -

Reproduction

https://github.com/damgem/sidebase-typeorm-test (only app.vue is modified - see commit)

Describe the bug

Saving an example entry does not work.
I've tried the 4 following approaches with all them producing an error in the browser console.
For the first two approaches the error message is DataSource is not set for this entity. and appears on execution while the latter ones produce an connection.driver.options is undefined error on page load.

const exampleData = {
  description: 'blah',
  details: 'blub',
}

// Will throw `DataSource is not set for this entity.` error when executed
const example = new Example()
await example.update(exampleData) // internally calls `.save()`

// Will throw `DataSource is not set for this entity.` error when executed
await Example.save<Example>(exampleData)

// Will throw `connection.driver.options is undefined` error on page load
await AppDataSource.manager.save(Example, exampleData)

// Will throw `connection.driver.options is undefined` error on page load
const exampleRepository = AppDataSource.getRepository(Example)
await exampleRepository.save(exampleData)

Additional context

I'm not sure this is a bug or rather an user error - anyways some guidance / documentation is appreciated :)

Logs

Warning & Error on execution for approach 1 and 2

[Vue warn]: Unhandled error during execution of component event handler 
  at <AButton onClick=fn<insertExample> > 
  at <App key=1 > 
  at <NuxtRoot> runtime-core.esm-bundler.js:38:16

Uncaught (in promise) Error: DataSource is not set for this entity.
    NuxtJS 2
    update Base.ts:31
    insertExample app.vue:13
    NuxtJS 4
    handleClick2 ant-design-vue_es.js:16419
    NuxtJS 49
BaseEntity.ts:115:18
    NuxtJS 5
    emit$1 self-hosted:1406
    get emit/< NuxtJS
    handleClick2 ant-design-vue_es.js:16419
    NuxtJS 48
    InterpretGeneratorResume self-hosted:1819
    AsyncFunctionNext self-hosted:807
    (Async: async)
    <anonymous> NuxtJS

Error on page load for approach 3 and 4

Uncaught TypeError: connection.driver.options is undefined
    NuxtJS 3
        create
        createEntityManager
        DataSource
    <anonymous> index.ts:5
EntityManagerFactory.ts:15:12

for context: index.ts:5 is a reference to server/database/index.ts starting on line 5 with

const AppDataSource = new DataSource({
  type: 'sqlite',
  // TODO: Only synchronize in production once we're stable
  synchronize: !isProduction || true,
  logging: false,
  database: ':memory:',
  entities: [Example],
})

Move to `sidebase` organization

Describe the feature

We want to move sidebase to the sidebase github organization to have all open-source efforts in one place: https://github.com/sidebase

To do this:

switch to sidebase/ version of nuxt-sidebase-parse (https://github.com/sidebase/nuxt-parse)
test out move of repo by moving sidebase-libs repo
move sidebase if everythiung went well

Additional information

No response

RFC: Collect possible nuxt-module ideas

Describe the feature

Collect possible ideas for useful nuxt-modules we can pull out of sidebase for easier development + versioning + distribution.

Modules docs: https://v3.nuxtjs.org/guide/going-further/modules

Additional information

Ideas so far:

nuxt-typeorm: Easy typeorm integration for nuxt, could even allow client-side usage of typeorm-objects, e.g., converting it to API-calls if on the client side
nuxt-secrets: Integration for chamber to use AWS SSM easily from app
nuxt-pdf
nuxt-swagger
nuxt-server-parse: Make a module out of https://github.com/sidestream-tech/sidebase/blob/main/app/server/helpers.ts
- library: https://github.com/sidebase/nuxt-parse
- comment: with the current nuxt 3 state probably better to use zod or tRPC, e.g., via npm create sidebase@latest
nuxt-prisma
- layer: https://github.com/sidebase/nuxt-prisma

Fail to build prisma with nuxt3 on cloudflare

Environment

Operating System: Darwin
Node Version: v16.13.0
Nuxt Version: 3.0.0
Nitro Version: 1.0.0
Package Manager: [email protected]
Builder: vite
User Config: modules, build, typescript
Runtime Modules: @nuxtjs/[email protected], @huntersofbook/[email protected]
Build Modules: -

Reproduction

prisma/prisma#18593

Describe the bug

process.stderr.fd is not available in cloudflare workers context, which is used in debug-js/debug

Additional context

No response

Logs

No response

RFC: Add either storybook or histoire as story framework

Describe the feature

The newest version of Storybook allows you to drop webpack and only use vite. As we are currently having issue upgrading to newer release candidates, due to an issue with historie it may make sense to drop historie for now and replace it with storybook.

https://twitter.com/storybookjs/status/1582023943098990592

Additional information

No response

Documentation / Best Practices for background workers and job queues

Ask your question

I really like this stack & the ideas taken from the create-t3-app but I'm hesitant to use this over other tried an true frameworks likenestjs + nuxt due to the fact that there's no documentation or guide on running background workers or implementing a job queue system within this stack using something like bull. Has anyone had experience building an app and configuring it to run background jobs with sidebase? I'm guessing the answer is to create another folder called worker/ with *.ts that run a bull worker consumers that can consume jobs but would be nice if it were documented or boilerplate existed within sidebase.

Additional information

No response

Add discord badge to readme

Describe the feature

Add our discord url to the readme so that people can join us to discuss the project, ask questions, ....

@zoey-kaiser should probably generate a dedicated url for this.

Additional information

No response

Upgrade to RC11

Describe the feature

Nuxt just released rc11, we should upgrade sidebase to it: https://github.com/nuxt/framework/releases/tag/v3.0.0-rc.11

Additional information

No response

`parse5` still throws errors during install through `[email protected]`

Environment

No response

Reproduction

No response

Describe the bug

See #75 (comment), thanks @djschilling for the report :thanks

Additional context

No response

Logs

No response

Extract todo's from #1

Describe the feature

In #1 there was a good amount of things we didn't adress, they were documented in the PR description (#1).

Extract them out into separate issues / feature requests please.

Additional information

No response

Add testamonial

Describe the feature

Add a testamonial we got for this project via our announcement tweet: https://twitter.com/i/timeline

"Beautiful work on sidebase!" by https://github.com/Atinux, CEO of Nuxt

He send this to me via DM, I asked him if we can use it as a testamonial and he said yes ❤️

Additional information

add to readme
add to website

Gives errors on npm install

Environment

Operating System: Darwin
Node Version: v16.14.2
Nuxt Version: ^3.0.0-rc.10
Nitro Version: -
Package Manager: [email protected]
Builder: webpack
User Config: alias, typescript, build, modules
Runtime Modules: @nuxtjs/tailwindcss@^5.3.5
Build Modules: -

Reproduction

> npx nuxi@latest init -t community/sidebase
> cd nuxt-sidebase-app
> npm i

Describe the bug

npm install fails with the error log below.

npm WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm ERR! code E404
npm ERR! 404 Not Found - GET https://cdn.npmmirror.com/packages/destr/1.2.0/destr-1.2.0.tgz
npm ERR! 404 
npm ERR! 404  'destr@https://registry.npm.taobao.org/destr/-/destr-1.2.0.tgz' is not in this registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/daeunyoon/.npm/_logs/2022-10-20T21_21_07_641Z-debug-0.log

Additional context

Logs

Choose vue 3 UI framework

Goal

List vue 3 ui component frameworks.

Context

We may want to switch away from ant-design-vue. For this we should list and evaluate existing CSS frameworks. The comparison in the end should be similar to this one ORM comparison we did: https://github.com/sidestream-tech/shift-book/issues/49#issuecomment-1152344039

Tasks

list shortcomings of ant-design vue
List answerable and understandable requirements in a first comment
- answerable means: you should be able to give clear yes / no / number answers in a short form
- understandable means: people with a base of web-development can read and understand them in a couple of words
- see #1 for some requirements already gathered
discuss requirements with @BracketJohn
Then create a table overview of exisitng frameworks that support vue3
- rate them in the requirements you listed above

Add more info about the company to the readme

Describe the feature

@BracketJohn aren't we hiring full-stack developers at the moment? I see that a lot of stargazers fits our profile, so we might add a section we're hiring. We might also add a section about the company and add direct contact info to get in touch if people need help to develop something.

Additional information

Suggested structure would be:

## Sidebase is baked by Sidestream

[Sidestream](https://sidestream.tech/) is a [remote-first] software agency based in Germany. Other information about the company...

- We can develop a project for you, [get in touch](the-email)
- We're hiring full stack developers, [apply here](the-link)

Investigate CLI options

I was looking at other create_blank_app cli tools and the one that seemed the most promising is create_nuxt_app.

They have the following structure:

SAO

They use a tool called SAO which is a scaffolding tool. It lets you define specific generators, that can combine different parts of a scaffold together. You can then pass options to the generators to scaffold a custom project based on the user input.

I would recommend that we create seperate branches for each lib (addon that can be changed eg. CSS framework or backend). Once we have the seperate branches we can compare them with main and see which files will need to be updated.

This is their SAO generator file. It defines where to get the different parts of the project that can then be installed: https://github.com/nuxt/create-nuxt-app/blob/master/packages/create-nuxt-app/lib/saofile.js

Inside the generator file you can define actions to build the starter:

Actions

Adds files to the template

if (this.answers.ui !== 'none') {
  actions.push({
    type: 'add',
    files: '**',
    templateDir: join(frameworksDir, this.answers.ui)
  })
}

Move files from one place to another

actions.push({
  type: 'move',
  patterns: {
    gitignore: '.gitignore',
    '_package.json': 'package.json',
  }
})

Modify a file

actions.push({
  type: 'modify',
  files: 'package.json',
  handler (data) {
    return { ...data, ...pkg.load(generator) }
  }
})

Remove a file

actions.push({
  type: 'remove',
  files: 'package.js'
})

Templates

In a separate folder they have all the required files to add a specific technology or framework. While their system is a bit more simple then ours (no backend), I think we can split specific parts of our starter into smaller segments.

Lets take the backend as an example:
We could move all the files we need for the backend to work in another folder. In our case these files would be:

package.json with only the extra packages and scripts needed to run the backend
/server
/tests/server

When the developers selected with-backend these files will be copied over. The templates folder is a seperate npm package, which is installed inside the CLI package. Through this the files can be accessed.

Prompts

They have one file in which all their questions are defined: https://github.com/nuxt/create-nuxt-app/blob/master/packages/create-nuxt-app/lib/prompts.js
These questions are asked and the answers are collected. SAO comes with a custom prompt system that we can use!

Conclusion

This option for the CLI will require a rewrite of the sidebase template. We will have to decide if we want to keep a demo version of sidebase in this repo, or if we create a new repo (or use sidebase-libs), however I believe this is the best option we can take to ensure we can continue to expand sidebase!

Add the `start` command to the merino template

Describe the feature

We want to have a start command in the merino template. To achieve this:

add NODE_ENV=production node .output/server/index.mjs to https://github.com/sidebase/merino/blob/v3/package.json

Additional information

This issue arose from #94, see more context there

Add Nuxi starting command back to readme

Describe the feature

I was starting a new project and I needed to quickly find the Nuxi command npx nuxi@latest init -t community/sidebase .

This command can only be found on our website. maybe we want to add it back to the readme for quick access

Additional information

No response

Upgrade to nuxt RC10

Describe the feature

RC10 was released https://github.com/nuxt/framework/discussions/7513 🎊

We should:

upgrade to RC.10
flatten the repo, remove app/
register our template with https://github.com/unjs/giget#template-registry
update our docs to use nuxi init as the starting command

Additional information

No response

Provide CLI to setup sidebase with different packages pre-installed

Describe the feature

Provide a setup cli to setup sidebase e.g., asking questions:

what css component libraries do you want to use?
do you want to have a backend?
vite or webpack?
...

Example of where we once build a cli: sidestream-tech/unified-auctions-ui#402

some libraries to use:

prompts

Additional information

No response

RFC: Add a store (e.g., pinia) to the starter

Describe the feature

Requested by @MaloLebrin here: #44 they suggested that adding a store, more specifically pinia, would be good.

I agree that it would be helpful, especially with getting typing etc right during the setup can be a bit of a hassle.

Additional information

We should checkout other storage solutions (e.g.: nuxt already has useSate which allows for small footprint stored in a very easy to use manner).

Add a nuxt sidebase setup wizard

Describe the feature

Currently when someone wants to use the scaffold they have to clone the repo. We could create a setup wizard with npx that automatically sets up the project locally for the user. This could also solve nuxt/nuxt#2, as we can offer a selection of CSS frameworks that the user can choose from.

We could also let the user customize how much they want to include in their setup (do they want a backend? Do they want a component testing system? Do they want JEST?).

This could allow it to be come even more versatile in the future and truly become THE SCAFFOLD for nuxt 3.

Additional information

No response

Improvements for demo page

Describe the feature

Add a re-fetching indicator or text that explains the data from the DB is fetched every 2 seconds.
Take the NUXT_PROJECT_VERSION from the package.json and not from an environment variable

Additional information

No response

RFC: Add modules and libraries you'd like to see in `sidebase`

This is a thread for interesting Vue3 packages that people have found that we may want to integrate at some point!

Error with useRoute, useRouter

Environment

Operating System: Darwin
Node Version: v16.14.2
Nuxt Version: 3.0.0-rc.8
Package Manager: [email protected]
Builder: vite
User Config: alias, typescript, build, modules
Runtime Modules: @nuxtjs/[email protected]
Build Modules: -

Reproduction

install node modules
on first npm run dev after install node modules, useRouter & useRoute give errors.
From the next execution, the error doesn't occur.
Also run npm run build first doesn't give errors.

Same error happens here.

Describe the bug

Additional context

No response

Logs

[Vue warn]: injection "Symbol(route location)" not found. 
  at <[name] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <Anonymous key="/123" routeProps= {Component: {…}, route: {…}} pageKey="/123" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <App key=1 > 
  at <NuxtRoot>
  
 [Vue warn]: injection "Symbol(router)" not found. 
  at <[name] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <Anonymous key="/123" routeProps= {Component: {…}, route: {…}} pageKey="/123" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <App key=1 > 
  at <NuxtRoot>
  
[Vue warn]: Unhandled error during execution of native event handler 
  at <[name] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > > 
  at <Anonymous key="/123" routeProps= {Component: {…}, route: {…}} pageKey="/123" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <App key=1 > 
  at <NuxtRoot>
  
Uncaught TypeError: Cannot read properties of undefined (reading 'push')
    at moveToMain ([name].vue:6:3)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:370:13)

Add AntDesign config files

Describe the feature

We want to give developers the option to customize AntDesign components and their colors. For this I would propse we add a pre configured less file, in which developers can override the AntDesign theme.

See example of this here: https://github.com/sidestream-tech/unified-auctions-ui/blob/main/frontend/assets/styles/ant-design.less

Additional information

No response

Sidebase Youtube Tutorial

Describe the feature

When I was searching for good learning methods & tutorials for vue/nuxt it was comparably more difficult than other frameworks' tutorials, although these days there are more and more good tutorials, it is still difficult to find up-to-date tutorials.

So, I suggest making Nuxt tutorials with Sidebase (which has up-to-date nuxt & related libraries)

This could help not only people who just start to use Sidebase scaffold but also people who start to learn Nuxt/Vue but don't know where to start.

Initial Tutorial Idea

Kick-off nuxt project
How to use API in Nuxt
How to use Nuxt3 built-in composables

Additional information

No response

Issues installing packages

Environment

------------------------------
- Operating System: `Darwin`
- Node Version:     `v16.14.2`
- Nuxt Version:     `^3.0.0-rc.10`
- Nitro Version:    `-`
- Package Manager:  `[email protected]`
- Builder:          `webpack`
- User Config:      `-`
- Runtime Modules:  `-`
- Build Modules:    `-`
------------------------------

Reproduction

No response

Describe the bug

After the latest update, I tried to clone the repo and run npm i. I got the following error message:

npm ERR! code 1
npm ERR! path /Users/zoey/Documents/Development/SideStream/sidebase/node_modules/sqlite3
npm ERR! command failed
npm ERR! command sh -c node-pre-gyp install --fallback-to-build
npm ERR! Failed to execute '/Users/zoey/.nvm/versions/node/v16.14.2/bin/node /Users/zoey/.nvm/versions/node/v16.14.2/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/Users/zoey/Documents/Development/SideStream/sidebase/node_modules/sqlite3/lib/binding/napi-v6-darwin-unknown-arm64/node_sqlite3.node --module_name=node_sqlite3 --module_path=/Users/zoey/Documents/Development/SideStream/sidebase/node_modules/sqlite3/lib/binding/napi-v6-darwin-unknown-arm64 --napi_version=8 --node_abi_napi=napi --napi_build_version=6 --node_napi_label=napi-v6' (1)
npm ERR! node-pre-gyp info it worked if it ends with ok
npm ERR! node-pre-gyp info using [email protected]
npm ERR! node-pre-gyp info using [email protected] | darwin | arm64
npm ERR! node-pre-gyp info check checked for "/Users/zoey/Documents/Development/SideStream/sidebase/node_modules/sqlite3/lib/binding/napi-v6-darwin-unknown-arm64/node_sqlite3.node" (not found)
npm ERR! node-pre-gyp http GET https://github.com/TryGhost/node-sqlite3/releases/download/v5.1.0/napi-v6-darwin-unknown-arm64.tar.gz
npm ERR! node-pre-gyp ERR! install response status 404 Not Found on https://github.com/TryGhost/node-sqlite3/releases/download/v5.1.0/napi-v6-darwin-unknown-arm64.tar.gz 
npm ERR! node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v93 ABI, unknown) (falling back to source compile with node-gyp) 
npm ERR! node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/TryGhost/node-sqlite3/releases/download/v5.1.0/napi-v6-darwin-unknown-arm64.tar.gz 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info ok 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp ERR! find Python 
npm ERR! gyp ERR! find Python Python is not set from command line or npm configuration
npm ERR! gyp ERR! find Python Python is not set from environment variable PYTHON
npm ERR! gyp ERR! find Python checking if "python3" can be used
npm ERR! gyp ERR! find Python - "python3" is not in PATH or produced an error
npm ERR! gyp ERR! find Python checking if "python" can be used
npm ERR! gyp ERR! find Python - "python" is not in PATH or produced an error
npm ERR! gyp ERR! find Python 
npm ERR! gyp ERR! find Python **********************************************************
npm ERR! gyp ERR! find Python You need to install the latest version of Python.
npm ERR! gyp ERR! find Python Node-gyp should be able to find and use Python. If not,
npm ERR! gyp ERR! find Python you can try one of the following options:
npm ERR! gyp ERR! find Python - Use the switch --python="/path/to/pythonexecutable"
npm ERR! gyp ERR! find Python   (accepted by both node-gyp and npm)
npm ERR! gyp ERR! find Python - Set the environment variable PYTHON
npm ERR! gyp ERR! find Python - Set the npm configuration variable python:
npm ERR! gyp ERR! find Python   npm config set python "/path/to/pythonexecutable"
npm ERR! gyp ERR! find Python For more information consult the documentation at:
npm ERR! gyp ERR! find Python https://github.com/nodejs/node-gyp#installation
npm ERR! gyp ERR! find Python **********************************************************
npm ERR! gyp ERR! find Python 
npm ERR! gyp ERR! configure error 
npm ERR! gyp ERR! stack Error: Could not find any Python installation to use
npm ERR! gyp ERR! stack     at PythonFinder.fail (/Users/zoey/.nvm/versions/node/v16.14.2/lib/node_modules/npm/node_modules/node-gyp/lib/find-python.js:330:47)
npm ERR! gyp ERR! stack     at PythonFinder.runChecks (/Users/zoey/.nvm/versions/node/v16.14.2/lib/node_modules/npm/node_modules/node-gyp/lib/find-python.js:159:21)
npm ERR! gyp ERR! stack     at PythonFinder.<anonymous> (/Users/zoey/.nvm/versions/node/v16.14.2/lib/node_modules/npm/node_modules/node-gyp/lib/find-python.js:202:16)
npm ERR! gyp ERR! stack     at PythonFinder.execFileCallback (/Users/zoey/.nvm/versions/node/v16.14.2/lib/node_modules/npm/node_modules/node-gyp/lib/find-python.js:294:16)
npm ERR! gyp ERR! stack     at exithandler (node:child_process:406:5)
npm ERR! gyp ERR! stack     at ChildProcess.errorhandler (node:child_process:418:5)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:526:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:289:12)
npm ERR! gyp ERR! stack     at onErrorNT (node:internal/child_process:478:16)
npm ERR! gyp ERR! stack     at processTicksAndRejections (node:internal/process/task_queues:83:21)
npm ERR! gyp ERR! System Darwin 21.6.0
npm ERR! gyp ERR! command "/Users/zoey/.nvm/versions/node/v16.14.2/bin/node" "/Users/zoey/.nvm/versions/node/v16.14.2/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/Users/zoey/Documents/Development/SideStream/sidebase/node_modules/sqlite3/lib/binding/napi-v6-darwin-unknown-arm64/node_sqlite3.node" "--module_name=node_sqlite3" "--module_path=/Users/zoey/Documents/Development/SideStream/sidebase/node_modules/sqlite3/lib/binding/napi-v6-darwin-unknown-arm64" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=6" "--node_napi_label=napi-v6"
npm ERR! gyp ERR! cwd /Users/zoey/Documents/Development/SideStream/sidebase/node_modules/sqlite3
npm ERR! gyp ERR! node -v v16.14.2
npm ERR! gyp ERR! node-gyp -v v8.4.1
npm ERR! gyp ERR! not ok 
npm ERR! node-pre-gyp ERR! build error 
npm ERR! node-pre-gyp ERR! stack Error: Failed to execute '/Users/zoey/.nvm/versions/node/v16.14.2/bin/node /Users/zoey/.nvm/versions/node/v16.14.2/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/Users/zoey/Documents/Development/SideStream/sidebase/node_modules/sqlite3/lib/binding/napi-v6-darwin-unknown-arm64/node_sqlite3.node --module_name=node_sqlite3 --module_path=/Users/zoey/Documents/Development/SideStream/sidebase/node_modules/sqlite3/lib/binding/napi-v6-darwin-unknown-arm64 --napi_version=8 --node_abi_napi=napi --napi_build_version=6 --node_napi_label=napi-v6' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/zoey/Documents/Development/SideStream/sidebase/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:526:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1092:16)
npm ERR! node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! node-pre-gyp ERR! System Darwin 21.6.0
npm ERR! node-pre-gyp ERR! command "/Users/zoey/.nvm/versions/node/v16.14.2/bin/node" "/Users/zoey/Documents/Development/SideStream/sidebase/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
npm ERR! node-pre-gyp ERR! cwd /Users/zoey/Documents/Development/SideStream/sidebase/node_modules/sqlite3
npm ERR! node-pre-gyp ERR! node -v v16.14.2
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.10
npm ERR! node-pre-gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/zoey/.npm/_logs/2022-09-16T11_12_01_789Z-debug-0.log

Additional context

No response

Logs

No response

Bump all non-major dependencies besides Nuxt RC, Histoire

Describe the feature

At the moment the incompatibility between nuxt rc11/12 and histoire (see #50, https://twitter.com/bracket_john_/status/1582000140550012930).

So until we can upgrade to RC11 / RC12, we should at least update all other deps.

Additional information

No response

Removing package-lock.json and make repo independent of development

A starter template should ideally not include a lock-file to allow usage of other dependency managers (also instructed in https://github.com/nuxt/starter). Removing that from the repository could get difficult for development, so a branching & CI may need to be setup (happy to look into myself & create a PR when I get time).

Issue started from #13 (comment)

Use `onBeforeUnmount` to destroy the Interval

Describe the feature

I'm referring to these lines:

https://github.com/sidestream-tech/sidebase/blob/8afc4885ffba1f1c0718da4067b49f8b2fcf51ef/app/pages/index.vue#L13-L17

I think that using the onBeforeUnmount hook should preferred because you want to always have access to the reference to refreshDataInterval during the current lifecycle of the component.

The current implementation uses onBeforeMount to attempt to clear an interval from a reference of a previous lifecycle. This cannot be guaranteed to work.

Additional information

No response

Error after fresh Merino start: "Named export 'PrismaClient' not found"

Environment

Operating System: Darwin
Node Version: v16.20.0
Nuxt Version: 0.0.0
Nitro Version: -
Package Manager: [email protected]
Builder: webpack
User Config: -
Runtime Modules: -
Build Modules: -

Reproduction

pnpm create sidebase@latest
Check all the marks to "yes"
pnpm dev

Describe the bug

For some reason, after the fresh start of the Merino template, we are getting the error that the export of "PrismaClient" has not been found.

Additional context

No response

Logs

ERROR  [worker reload] [worker init] Named export 'PrismaClient' not found. The requested module 'file:///Users/user/WebstormProjects/main/nuxt-sidebase/node_modules/.pnpm/@[email protected][email protected]/node_modules/@prisma/client/index.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'file:///Users/user/WebstormProjects/main/nuxt-sidebase/node_modules/.pnpm/@[email protected][email protected]/node_modules/@prisma/client/index.js';
const { PrismaClient } = pkg;


  import { PrismaClient } from 'node_modules/.pnpm/@[email protected][email protected]/node_modules/@prisma/client/index.js';
  ^^^^^^^^^^^^
  SyntaxError: Named export 'PrismaClient' not found. The requested module 'node_modules/.pnpm/@[email protected][email protected]/node_modules/@prisma/client/index.js' is a CommonJS module, which may not support all module.exports as named exports.
  CommonJS modules can always be imported via the default export, for example using:
  
  import pkg from 'node_modules/.pnpm/@[email protected][email protected]/node_modules/@prisma/client/index.js';
  const { PrismaClient } = pkg;
  
  at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
  at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
  at async Promise.all (index 0)
  at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
  at async loadESM (node:internal/process/esm_loader:91:5)
  at async handleMainPromise (node:internal/modules/run_main:65:12)

ℹ Vite client warmed up in 1271ms

Finalize choices of options in the CLI

Describe the feature

How that we finished v0.1.0-alpha-4 and are ready to add new options, we need to brainstorm what we want to exactly add. This issue is a thread where users and team member can request new options for the create-nuxt3-app cli!

Additional information

No response

Extract API-helpers into a nuxt-module

Describe the feature

Extract out the parsing utilities into a nuxt-module, publish it to npm.

I'm specifically talking about: https://github.com/sidestream-tech/sidebase/blob/main/app/server/helpers.ts

Additional information

No response

checks.state agument is missing in production azure-ad

Environment

- Operating System: Windows_NT`

Node Version: v16.19.0
Nuxt Version: 3.1.1
Nitro Version: 2.1.1
Package Manager: [email protected]
Builder: vite
User Config: routeRules, nitro, css, modules, auth, unocss, app
Runtime Modules: @unocss/[email protected], @pinia/[email protected], @vueuse/[email protected], @sidebase/[email protected], [email protected]
Build Modules: `-``

Reproduction

My server/api/auth/[...].ts

`import { NuxtAuthHandler } from '#auth'
import AzureADProvider from 'next-auth/providers/azure-ad'

export default NuxtAuthHandler({
pages: {
// Change the default behavior to use /login as the path for the sign-in page
signIn: '/login',
},
secret: process.env.AUTH_SECRET,

providers: [
    // @ts-expect-error You need to use .default here for it to work during SSR. May be fixed via Vite at some point
    AzureADProvider.default({
        clientId: process.env.AZURE_AD_CLIENT_ID,
        clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
        tenantId: process.env.AZURE_AD_TENANT_ID,
    }),
],

})
`

nuxt.config.ts

auth: { baseURL: '/api/auth', globalAppMiddleware: { isEnabled: false, }, isEnabled: true, provider: { type: 'authjs', defaultProvider: 'azure-ad', trustHost: true, }, },

middleware/auth.ts

`export default defineNuxtRouteMiddleware(async (route) => {
const { data } = useAuth()

const user = data.value?.user
if (!user?.email && route.path.includes('/')) {
    return navigateTo('/login')
}

})
`

Describe the bug

nitro] [dev] [unhandledRejection] Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client [next-auth][error][OAUTH_CALLBACK_ERROR] https://next-auth.js.org/errors#oauth_callback_error checks.state argument is missing { error: TypeError: checks.state argument is missing at Client.callback (C:\Users\m.teekens\sandb\validation\cash-statement\.output\server\node_modules\openid-client\lib\client.js:387:13) at oAuthCallback (C:\Users\m.teekens\sandb\validation\cash-statement\.output\server\node_modules\next-auth\core\lib\oauth\callback.js:127:29) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async Object.callback (C:\Users\m.teekens\sandb\validation\cash-statement\.output\server\node_modules\next-auth\core\routes\callback.js:52:11) at async AuthHandler (C:\Users\m.teekens\sandb\validation\cash-statement\.output\server\node_modules\next-auth\core\index.js:201:28) at async file:///C:/Users/m.teekens/sandb/validation/cash-statement/.output/server/chunks/node-server.mjs:430:24 at async Object.handler (file:///C:/Users/m.teekens/sandb/validation/cash-statement/.output/server/node_modules/h3/dist/index.mjs:840:19) at async Server.toNodeHandle (file:///C:/Users/m.teekens/sandb/validation/cash-statement/.output/server/node_modules/h3/dist/index.mjs:915:7) { name: 'OAuthCallbackError', code: undefined }, providerId: 'azure-ad', message: 'checks.state argument is missing' }

Additional context

I'm using a custom middleware, if i remove the custom middleware i get a headers don't exist error.
I used github before, and that worked with the same setup

Logs

No response

Design a website for SideBase.io

Goal
In order to present the features and benefits of SideBase, we are looking to launch a website. This is a preliminary planning issue in which we will collect the information we aim to provide and create mocks for the finished site.

Tasks

Collect the information we want to show on the page
Create a mock for the design

TailwindCSS only correct loads on Hard Refresh when starting dev server

Environment

Operating System: Darwin
Node Version: v16.14.2
Nuxt Version: 3.0.0-rc.10
Nitro Version: 0.5.3
Package Manager: [email protected]
Builder: vite
User Config: -
Runtime Modules: -
Build Modules: -

Reproduction

No response

Describe the bug

When running a sidebase app in the newest version, the Tailwind styles only correctly load when hard refreshing CTL + F5. When reloading normally it looks like this:

Screen.Recording.2022-09-19.at.18.12.36.mov

Additional context

No response

Logs

No response

Add dev-instructions to initial readme, so that people have it when they start development

Describe the feature

When starting a new project with sidebase it would be helpful to have the development commands as part of the readme.

Currently, the commands can be found here: https://sidebase.io/sidebase/documentation

Additional information

No response

CLI upgrade command

Describe the feature

This is an idea for the very future. After we merge #13 we could maybe introduce a sidebase upgrade command that keeps the existing files and attempts to upgrade the nuxt version and add any extra linting we introduced.

I am not too sure how this would look on a technical level, but I think it would be awesome to add if possible!

Additional information

No response

tailwind css overwrites naive-ui button styles

Environment

No response

Reproduction

No response

Describe the bug

Button background colors are transparent due to tailwind css override.
npm create sidebase@latest

See here how to fix this
huntersofbook/naive-ui-nuxt#4

Additional context

No response

Logs

No response

RFC: Add a one-click-try-out button

Describe the feature

something like:

we can use stackblitz.

Additional information

No response

[ERROR] Merino Stack TypeError after creating project, empty folder

Environment

Operating System: Windows_NT
Node Version: v18.1.0
Nuxt Version: 0.0.0
Nitro Version: -
Package Manager: unknown
Builder: webpack
User Config: -
Runtime Modules: -
Build Modules: -

Reproduction

No repro. Problem with CLI.

Describe the bug

Fresh project with pnpm create sidebase@latest or npm create sidebase@latest.

Merino
nuxt-auth
No GIT init
Yes install

Error:

Failed to initialize project folder - does a folder with the same name already exist? Aborting mission. Here is the full error:
TypeError

And there are no other folders in the root. Reloaded VSCode workspace. Tried many times with different names.

Ultimately, selected Cheviot Stack and it was successful.

Additional context

No response

Logs

No response

Investigate the usage of different Vue3 UI Component frameworks

Goal

In #2 we made a list of multiple Vue component frameworks we might want to add support for. The next step is to narrow down the selection and create separate branches running on these frameworks. This can be used to test their integration into our scaffold, their features and ease of use.

Context
We currently use AntDesign 3. As we also have a lot of experience with this framework, it will be left out of the investigation and be seen as a given, that we always provide at least one version with AntDesign. The frameworks I will be creating branches for in the future will be:

PrimeVue
Naive UI (thanks to @ManUtopiK 😊)
Element UI

I can imagine checking more in the future, however to keep the scope of this issue down I have narrowed it to these three I plan to implement in the first wave.

Nuxt server error on 'npm run dev'

Environment

Operating System: Darwin
Node Version: v16.14.2
Nuxt Version: 3.0.0-rc.9
Nitro Version: 0.5.1
Package Manager: [email protected]
Builder: vite
User Config: -
Runtime Modules: -
Build Modules: -

Reproduction

No response

Describe the bug

The nuxt server works with docker running, but when the server does not connect on docker, it gives a 500 server error.
However, npm run build works fine in any scenario.

Additional context

This seems similar as reported nuxt bug

Logs

Nuxi 3.0.0-rc.9                                                               14:00:38
Nuxt 3.0.0-rc.9 with Nitro 0.5.1                                              14:00:38
                                                                              14:00:39
  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.2.109:3000/

ℹ Vite client warmed up in 541ms                                              14:00:41
ℹ Vite server warmed up in 139ms                                              14:00:41
✔ Nitro built in 530 ms                                                 nitro 14:00:42
DB: Initializing DB connection
DB: Successfully initialized database connection
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: Server rendering context not provided. Make sure to only call useSSRContext() conditionally in the server build.
[Vue warn]: Unhandled error during execution of setup function 
  at <NuxtRoot>
[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'modules')
  at _sfc_main.setup (./node_modules/nuxt/dist/app/components/nuxt-root.vue:67:16)  
  at callWithErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22)  
  at setupStatefulComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7107:29)  
  at setupComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7062:11)  
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:172:17)  
  at renderToString (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:446:26)  
  at Object.renderToString$1 [as renderToString] (./.nuxt/dev/index.mjs:661:24)  
  at Object.renderToString (./node_modules/vue-bundle-renderer/dist/runtime.mjs:173:40)  
  at processTicksAndRejections (node:internal/process/task_queues:96:5)  
  at async ./.nuxt/dev/index.mjs:710:21
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: Server rendering context not provided. Make sure to only call useSSRContext() conditionally in the server build.
[Vue warn]: Unhandled error during execution of setup function 
  at <NuxtRoot>
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: Server rendering context not provided. Make sure to only call useSSRContext() conditionally in the server build.
[Vue warn]: Unhandled error during execution of setup function 
  at <NuxtRoot>

sidebase / sidebase Goto Github PK

sidebase's Introduction

sidebase

Visit sidebase.io/sidebase for quick-start, docs, guides and more!

Features

License

sidebase's People

Contributors

Stargazers

Watchers

Forkers

sidebase's Issues

Describe the feature

Additional information

Environment

Reproduction

Describe the bug

Additional context

Logs

Describe the feature

Additional information

Describe the feature

Additional information

Describe the feature

Additional information

Environment

Reproduction

Describe the bug

Additional context

Logs

Environment

Reproduction

Describe the bug

Additional context

Logs

Warning & Error on execution for approach 1 and 2

Error on page load for approach 3 and 4

Describe the feature

Additional information

Describe the feature

Additional information

Environment

Reproduction

Describe the bug

Additional context

Logs

Describe the feature

Additional information

Ask your question

Additional information

Describe the feature

Additional information

Describe the feature

Additional information

Environment

Reproduction

Describe the bug

Additional context

Logs

Describe the feature

Additional information

Describe the feature

Additional information

Environment

Reproduction

Describe the bug

Additional context

Logs

Goal

Context

Tasks

Describe the feature

Additional information

SAO

Actions

Templates

Prompts

Conclusion

Describe the feature

Additional information