I'm using tailwind v3 with Nuxt JS, while design the UI, I mostly use custom style arbitrary values of tailwind, e.g :
<div class="text-[#0074C9] text-5xl font-bold leading-[60px] py-2 tracking-[-0.022em] lg:mr-[90px]">
...
</div>
everything works fine when I run in development mode npm run dev but after build and run in production mode npm run start, all the custom styles didn't work (text-[#0074C9], leading-[60px], tracking-[-0.022em], lg:mr-[90px]).
is there something that I need to configure to make the custom style work in production mode?
I follow all the instruction here https://tailwindcss.com/docs/guides/nuxtjs, btw I use SASS, not CSS.
Thank you.
Related
Integrating Algolia search with VSF/Next branch, got the basics down. Moving on to routing.
With Vanilla Nuxt the integration works as it should, although the workarounds are starting to stack.
To Repro:
pull && yarn && yarn run dev
http://192.168.1.4:3000/ && search for something
URL gets rewritten
checkout VSF get a flicker re-render.
To Repro:
same as above except go to /Search
URL gets rewritten for a flash then render fires and goes back to original route
What I’ve tried:
Built the two repos in isolation and it seems to not be an issue with nuxt itself, more an issue with Vue StoreFront
Reference:
https://github.com/algolia/vue-instantsearch/issues/916 (tangential)
Okee this has something to do with the nuxt comp passing the route <nuxt :key="$route.fullPath"/>
I was able to bypass it by doing this in the default template
<div v-if="String($route.name) === 'Search___en'"><search/></div>
<div v-else ><nuxt :key="$route.fullPath"/></div>
Basically bypassing the comp with the key which was triggering a re-render because it uses the router under the hood... I'm guessing.
This is what eventually allowed me to use the integration code effectively: https://github.com/ed42311/algolia-vsf-routes/blob/main/layouts/default.vue#L11
While this solution works, Other suggestions are appreciated.
I know that a vue component has an ending tag. But in laravel 8.x, I found jet-application-mark without an ending tag like this...
<div class="flex-shrink-0 flex items-center">
<a href="/dashboard">
<jet-application-mark class="block h-9 w-auto" />
</a>
</div>
If you have laravel installed, you will find the full source code here...
resources > js > layouts > AppLayout.vue (line no: 11)
Is it a vue component? of anything else?
It Jetstream from the new Livewire package that replaces Laravel Auth packages:
From the webpage: Laravel Jetstream is a beautifully designed application scaffolding for Laravel. Jetstream provides the perfect starting point for your next Laravel application and includes login, registration, email verification, two-factor authentication, session management, API support via Laravel Sanctum, and optional team management.
If you need to change the icon you must publish the Jetstream views with this command:
php artisan vendor:publish --tag=jetstream-views
Next, you should customize the SVGs located in the
resources/views/vendor/jetstream/components/application-logo.blade.php,
resources/views/vendor/jetstream/components/authentication-card-logo.blade.php,
and
resources/views/vendor/jetstream/components/application-mark.blade.php
components.
Source: Jetstream Documentation
If you want to learn what is Livewire you can read the docs in https://laravel-livewire.com
I want to use ag-grid-vue without npm installing it.
code: https://codepen.io/riodw/pen/zYYOjdE
So I found this: Is it possible to use ag-grid with vue without a builder?. Followed that guid, and was basically able to get something to render but it get's stuck on "Loading..."
I downloaded ag-grid (from here: https://github.com/ag-grid/ag-grid)
Went into cd ag-grid-master/packages/ag-grid-vue
npm installed npm install
Then built npm run build
This generated the "ag-grid-vue.umd.js" file.
Modified that file to put AgGridVue on the window where AgGridVue is returned:
window.AgGridVue = AgGridVue;
return AgGridVue;
Then include that file with the ag-grid-community file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/21.2.1/ag-grid-community.min.js"></script>
<script src="/global/js/ag-grid/ag-grid-vue.umd.js"></script>
And ag-grid renders!
Problem is it get's stuck on loading and I don't know if there is a solution.
Are there any possibilities to help here?
Any help would be great. If not I'll have to use something else as installing is not an option for me unfortunately.
Image of render:
Debug mode codepen:
https://cdpn.io/riodw/debug/zYYOjdE/LDkmdEDdQpzA
Everything you do is correct except one tiny thing.
I've found the solution, when I've used vue.js (not minified version), then Vue itself has thrown a warning;
Indicating that, in the "ag-grid-vue" tag, you should not use :rowData as below;
<ag-grid-vue :rowData="rowData" :columnDefs="columnDefs"/>
this usage is wrong as stated in the console warning from Vue.
You should use kebab-case instead of camel-case as below;
<ag-grid-vue :row-data="rowData" :column-defs="columnDefs"/>
This actually works as expected.
I beleive, camel-case works in an environment with the presence of module-loader.
What I'm using
VSCode
Quasar (Vue)
Typescript
Eslint/#typescript-eslint
Prettier / prettierhtml / Vetur
Current issue:
Until recently, injected script in the <template> of vue files (e.g. onSignIn in <div #click="onSignIn"> was checked against available variables/methods in the <script lang="ts"> part. This has now stopped working and I couldn't figure out what's the reason. Playing around with VSCode/Vetur/eslint settings wasn't successful either so far.
As the above hasn't worked earlier either but just since I started my latest project, I'm not sure what settings is responsible for that part anyway (Veturs' HTML > Validate > Scripts apparently is not enough) and my first question is, whether it works for you; the second, if you know exactly why/why not (?).
Setting vetur.experimental.templateInterpolationService: true did the trick.
I'm using vue as CDN because app is really simple.
at this point when I add the code
<div id="app">
<!-- some code here -->
<form action="/charge" method="POST">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="<%= stripePublishableKey %>"
data-amount="2500"
data-name="ec-system payment"
data-description="You will pay this money for something!"
data-locale="auto">
</script>
</form>
</div>
This code gives me the error something like below.
Templates should only be responsible for mapping the state to the UI.
Avoid placing tags with side-effects in your templates, such as
, as they will not be parsed
I found some npm library like "vue-stripe" but I don't know how I can use this library when I use vue with cdn not the vue-cli.
In vue, you can not use script tag inside of template.
In your case you could use this library called "vue-stripe-checkout".
This library supports in two ways
NPM or Yarn
npm install vue-stripe-checkout --save
yarn add vue-stripe-checkout
CDN
https://unpkg.com/vue-stripe-checkout/build/vue-stripe-checkout.js
You can use second method by including cdn into your app.
Please refer this vue-stripe-checkout for detailed information.