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
Related
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.
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.
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.
Can someone help with explaining how I can use vue.js with asp.net core 2.1.
ideally i'd just like to hit f5 in visual studio 2017 and the website load.
i know ms previously had spa templates but they seem to have been abandoned. theres a starter template on github too but that is using .net core 2.0.
I am trying to use Vue.js with MVC Core 2.1 for a multi page application at the moment, and have found a working solution.
I see you mention SPA though, my answer will be for Multi page apps, but some of the ideas may apply.
My approach
I've created a main.js file in wwwroot/resources/js/ and a components subfolder within that directory - and also a layout folder in the components one.
In the main.js I create a Vue instance and attach it to #app root element in the HTML. In this js file, I also register most of the components globablly, unless they are only needed for specific components. My main.js looks something like this:
# wwwroot/resources/js/main.js
import Vue from 'vue';
import Axios from 'axios';
import BaseLayout from './components/layout/BaseLayout.vue';
window.axios = Axios;
Vue.component("base-layout", BaseLayout);
new Vue({
el: "#App"
});
In the _layout.cshtml file I have the following (relevant content):
# Views/Shared/_Layout.cshtml
<div id="App">
<base-layout>
#RenderBody()
</base-layout>
</div>
<script src="~/resources/js/bundle.js"></script>
If you are only interested in SPA - I would probably do something like:
# wwwroot/resources/js/main.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: "#app",
render: (h) => h(App)
});
# wwwroot/resources/js/App.vue
<template>
<div id="app">
<-- Use other components here -->
</div>
</template>
<script>
export default {
name: "app",
data: function() {
return {
// What evs
}
}
}
</script>
VueJs (along with Angular and ReactJs) was available at one stage from the new project but was removed later on because of limited maintainers. However you can still create a VueJs app via command line. Run dotnet new -l to see the list of available dotnet templates.
if you don't see vuejs in the list, install the templates
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
Once you create the web app, and open it in the VS you should be able to run it like any other project, by hitting F5.
There are a few good resources online :
Asp.NETCore 2.1 Vue 2 Starter - by DevHelp.Online
Creating a VueJS (with TypeScript) SPA on ASP.Net Core 2.1
Second link mentions that vuejs template is still available via command line.
Also i found this series very informative, explains from setting up to deployment.
https://code-maze.com/net-core-series/
If you are building a multi-page application, you can take a look at this template as an example or starting point.
https://github.com/danijelh/aspnetcore-vue-typescript-template
If you're building an SPA, consider splitting your API from your UI and use Vue CLI 3 for the UI part.
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.