Giter Club home page Giter Club logo

vitesse-nuxt-bridge's Introduction

Archived. Try the Nuxt 3 version instead.


Vitesse Nuxt Bridge

Vitesse experience for Nuxt 2 and Vue 2.


Features

  • ๐Ÿ’š Nuxt Bridge - Experience Nuxt 3 features on existing Nuxt 2 projects.

  • โšก๏ธ Vite - Instant HMR

  • ๐ŸŽจ UnoCSS - The instant on-demand atomic CSS engine.

  • ๐Ÿ˜ƒ Use icons from any icon sets in Pure CSS, powered by UnoCSS

  • ๐Ÿ”ฅ Use the new <script setup> syntax in Vue 2

  • ๐Ÿ“ฅ APIs auto importing - use Composition API and others directly

  • ๐Ÿฆพ TypeScript, of course

Plugins

Nuxt Modules

  • @nuxt/bridge - Experience Nuxt 3 features on existing Nuxt 2 projects.
  • VueUse - collection of useful composition APIs
  • UnoCSS - on-demand atomic CSS engine - powers pure CSS Icons!

IDE Integration

We recommend using VS Code with Volar to get the best experience (You might want to disable Vetur if you have it).

vitesse-nuxt-bridge's People

Contributors

acidjazz avatar antfu avatar atinux avatar maninak avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

vitesse-nuxt-bridge's Issues

Fail to run

Thanks for this project, I was very eager to try it with all your latest developments, UnoCSS already in this project? omg!

when running yarn dev or ni dev it can't find nuxi

HRM Doesn't work with Styles

This is a different issue that affects Tailwindcss and WindiCss when using Vite. Changing the styles in the template doesn't update the browser. You are probably aware of the problem, but Is this something that you could take a look? thanks!

more details in nuxt/vite#164

tailwind.config.js is ignored

When adding tailwind.config.js the settings are ignored ... is this normal behaviour?
I also tried (tailwind|windi).config.(js|ts) to no avail.

Functions from @vueuse not working

Hi there,

I'm trying to use some functions from @vueuse on a fresh install with this template, but it seems something is not working well.

For example, the button icon for dark mode doesn't change after clicking it but is strange because the theme actually does.

Also, I tried to use the function useMouse() and the position of the mouse doesn't get update on the template.

vueuse-notworking.mov

The code I'm using is this:

<template>
  <main py-40 px-20 text-center>
    <img w-16 inline-block src="/nuxt.svg" />
    <img w-16 inline-block src="/vite.svg" />
    <h1 mt-1 mb-3 text-2xl cursor-default>
      <span text-green-500 hover:text-white hover:bg-green-600>Nuxt Bridge</span>
      <span text-gray-400 mx-2>+</span>
      <span text-purple-500>Vitesse</span>
    </h1>
    <Counter />
    <div class="text-2xl m-3 text-gray-500 flex justify-center gap-3">
      <a href="https://github.com/antfu/vitesse-nuxt-bridge" target="__blank">
        <div class="i-carbon-campsite" />
      </a>
      <DarkToggle />
    </div>
    <div>
      <pre>
        {{ mouse }}
      </pre>
    </div>
  </main>
</template>

<script setup lang="ts">
import { reactive } from 'vue-demi'

const mouse = reactive(useMouse())
</script>

"Cannot find name x" on template when using `script setup lang='ts'` with volar

With volar v0.28.10 installed (vetur is uninstalled) in vscode 1.61.2 and a clean git-clone of af33ccb97b877353fe7917d8dcf16961f9acf1d6 I'm getting red squigglies from typescript on the template for variables defined inside script setup.

image

Does anybody else have this? How would I go about fixing this?


Thank you antfu for this super useful repo we can use to bootstrap new projects while plugins are catching up with nuxt3. ๐Ÿ™

Deploy fail on netlify, and get System is not defined

  1. use this template to create new repo
  2. build on netlify fail with this log
    image

and then in console see this message

[@vueuse/core] Installing Nuxt module with @vueuse/core/nuxt is deprecated. Please use @vueuse/nuxt instead.
  1. so change package and config save as this repo
  2. build again on netlify, this time build success, but app not working site
  3. and get System is not defined in console

image

Count doesn't update when increment / decrement buttons are clicked

Repro steps

  1. npm run dev or npm run build
  2. visit localhost:3000/
  3. type anything in name input and press enter key (or OK button)
  4. click + or - button

Expected behaviour

  • counter in/de-crements

Actual behaviour

  • counter doesn't change

Notes

  • if we reload the navigator (e.g. with Ctrl+R) then the bug is resolved until the next npm run dev

Peek 2021-11-08 15-48

in windows run fail

Describe the bug

windows run pnpm dev fail
image

Reproduction

null

System Info

System:                                                     
    OS: Windows 10 10.0.19044                                 
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz    
    Memory: 4.22 GB / 15.76 GB                                
  Binaries:                                                   
    Node: 16.18.1 - C:\Program Files\nodejs\node.EXE          
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD          
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD             
    pnpm: 8.6.9 - C:\Program Files\nodejs\pnpm.CMD            
  Browsers:                                                   
    Edge: Spartan (44.19041.1266.0), Chromium (115.0.1901.188)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

pnpm

Validations

  • Follow our Code of Conduct
  • Read the Contributing Guide.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • The provided reproduction is a minimal reproducible of the bug.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.